Tables

Default Table

This is a table caption, made with caption
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
TD 1.1 TD 1.2 TD 1.3
TD 2.1 TD 2.2 TD 2.3
TD 3.1 TD 3.2 TD 3.3
HTML 
<table class="">
    <caption>This is a table caption, made with caption</caption>
    <colgroup></colgroup>
    <thead>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Table Footer 1</td>
            <td>Table Footer 2</td>
            <td>Table Footer 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>TD 1.1</td>
            <td>TD 1.2</td>
            <td>TD 1.3</td>
        </tr>
        <tr>
            <td>TD 2.1</td>
            <td>TD 2.2</td>
            <td>TD 2.3</td>
        </tr>
        <tr>
            <td>TD 3.1</td>
            <td>TD 3.2</td>
            <td>TD 3.3</td>
        </tr>
    </tbody>
    </table>

Table Lined All

This is a table caption, made with caption
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
TD 1.1 TD 1.2 TD 1.3
TD 2.1 TD 2.2 TD 2.3
TD 3.1 TD 3.2 TD 3.3
HTML 
<table class="ss-c-table--lined--all">
    <caption>This is a table caption, made with caption</caption>
    <colgroup></colgroup>
    <thead>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Table Footer 1</td>
            <td>Table Footer 2</td>
            <td>Table Footer 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>TD 1.1</td>
            <td>TD 1.2</td>
            <td>TD 1.3</td>
        </tr>
        <tr>
            <td>TD 2.1</td>
            <td>TD 2.2</td>
            <td>TD 2.3</td>
        </tr>
        <tr>
            <td>TD 3.1</td>
            <td>TD 3.2</td>
            <td>TD 3.3</td>
        </tr>
    </tbody>
    </table>

Table Lined Horizontal

This is a table caption, made with caption
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
TD 1.1 TD 1.2 TD 1.3
TD 2.1 TD 2.2 TD 2.3
TD 3.1 TD 3.2 TD 3.3
HTML 
<table class="ss-c-table--lined--horizontal">
            
    <caption>This is a table caption, made with caption</caption>
    <colgroup></colgroup>
    <thead>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Table Footer 1</td>
            <td>Table Footer 2</td>
            <td>Table Footer 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>TD 1.1</td>
            <td>TD 1.2</td>
            <td>TD 1.3</td>
        </tr>
        <tr>
            <td>TD 2.1</td>
            <td>TD 2.2</td>
            <td>TD 2.3</td>
        </tr>
        <tr>
            <td>TD 3.1</td>
            <td>TD 3.2</td>
            <td>TD 3.3</td>
        </tr>
    </tbody>
    
        </table>

Table Lined Vertical

This is a table caption, made with caption
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
TD 1.1 TD 1.2 TD 1.3
TD 2.1 TD 2.2 TD 2.3
TD 3.1 TD 3.2 TD 3.3
HTML 
<table class="ss-c-table--lined--vertical">
            
    <caption>This is a table caption, made with caption</caption>
    <colgroup></colgroup>
    <thead>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Table Footer 1</td>
            <td>Table Footer 2</td>
            <td>Table Footer 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>TD 1.1</td>
            <td>TD 1.2</td>
            <td>TD 1.3</td>
        </tr>
        <tr>
            <td>TD 2.1</td>
            <td>TD 2.2</td>
            <td>TD 2.3</td>
        </tr>
        <tr>
            <td>TD 3.1</td>
            <td>TD 3.2</td>
            <td>TD 3.3</td>
        </tr>
    </tbody>
    
        </table>

Table Striped Horizontal

This is a table caption, made with caption
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
TD 1.1 TD 1.2 TD 1.3
TD 2.1 TD 2.2 TD 2.3
TD 3.1 TD 3.2 TD 3.3
HTML 
<table class="ss-c-table--striped--horizontal">
            
    <caption>This is a table caption, made with caption</caption>
    <colgroup></colgroup>
    <thead>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Table Footer 1</td>
            <td>Table Footer 2</td>
            <td>Table Footer 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>TD 1.1</td>
            <td>TD 1.2</td>
            <td>TD 1.3</td>
        </tr>
        <tr>
            <td>TD 2.1</td>
            <td>TD 2.2</td>
            <td>TD 2.3</td>
        </tr>
        <tr>
            <td>TD 3.1</td>
            <td>TD 3.2</td>
            <td>TD 3.3</td>
        </tr>
    </tbody>
    
        </table>

Table Striped Vertical

This is a table caption, made with caption
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
TD 1.1 TD 1.2 TD 1.3
TD 2.1 TD 2.2 TD 2.3
TD 3.1 TD 3.2 TD 3.3
HTML 
<table class="ss-c-table--striped--vertical">
            
    <caption>This is a table caption, made with caption</caption>
    <colgroup></colgroup>
    <thead>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Table Footer 1</td>
            <td>Table Footer 2</td>
            <td>Table Footer 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>TD 1.1</td>
            <td>TD 1.2</td>
            <td>TD 1.3</td>
        </tr>
        <tr>
            <td>TD 2.1</td>
            <td>TD 2.2</td>
            <td>TD 2.3</td>
        </tr>
        <tr>
            <td>TD 3.1</td>
            <td>TD 3.2</td>
            <td>TD 3.3</td>
        </tr>
    </tbody>
    
        </table>

Table Size SM

This is a table caption, made with caption
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
TD 1.1 TD 1.2 TD 1.3
TD 2.1 TD 2.2 TD 2.3
TD 3.1 TD 3.2 TD 3.3
HTML 
<table class="ss-c-table--striped--vertical ss-c-table--size--sm">
            
    <caption>This is a table caption, made with caption</caption>
    <colgroup></colgroup>
    <thead>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Table Footer 1</td>
            <td>Table Footer 2</td>
            <td>Table Footer 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>TD 1.1</td>
            <td>TD 1.2</td>
            <td>TD 1.3</td>
        </tr>
        <tr>
            <td>TD 2.1</td>
            <td>TD 2.2</td>
            <td>TD 2.3</td>
        </tr>
        <tr>
            <td>TD 3.1</td>
            <td>TD 3.2</td>
            <td>TD 3.3</td>
        </tr>
    </tbody>
    
        </table>

Table Collapsible

Expandable Table Title
This is a table caption, made with caption
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
TD 1.1 TD 1.2 TD 1.3
TD 2.1 TD 2.2 TD 2.3
TD 3.1 TD 3.2 TD 3.3
HTML 
<div class="ss-c-collapsible_table">
            <div class="ss-c-collapsible_table--header">
                <span class="ss-c-collapsible_table--title">
                    Expandable Table Title
                </span>
                <button class="active ss-c-flipper--down" type="button"></button>
            </div>

            <div class="ss-c-collapsible_table--content ss-c-collapse">
                <table class="ss-c-table--lined--horizontal">
                    
    <caption>This is a table caption, made with caption</caption>
    <colgroup></colgroup>
    <thead>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Table Footer 1</td>
            <td>Table Footer 2</td>
            <td>Table Footer 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>TD 1.1</td>
            <td>TD 1.2</td>
            <td>TD 1.3</td>
        </tr>
        <tr>
            <td>TD 2.1</td>
            <td>TD 2.2</td>
            <td>TD 2.3</td>
        </tr>
        <tr>
            <td>TD 3.1</td>
            <td>TD 3.2</td>
            <td>TD 3.3</td>
        </tr>
    </tbody>
    
                </table>
            </div>
        </div>

Data Table

Data Table Title
This is a table caption, made with caption
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
TD 1.1 TD 1.2 TD 1.3
TD 2.1 TD 2.2 TD 2.3
TD 3.1 TD 3.2 TD 3.3
HTML 
<div class="ss-c-data_table">
            <div class="ss-c-data_table--header">
                <span class="ss-c-data_table--title">Data Table Title</span>
                <form role="search" class="ss-c-data_table--form">
                    <button class="ss-c-data_table--button" type="submit">
                        <i class="ss-c-i i_ui_search"></i>
                    </button>
                    <input
                        type="text"
                        class="ss-c-data_table--input"
                        placeholder="Search..."
                    />
                </form>
            </div>

            <table class="ss-c-table--lined--horizontal">
                
    <caption>This is a table caption, made with caption</caption>
    <colgroup></colgroup>
    <thead>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Table Footer 1</td>
            <td>Table Footer 2</td>
            <td>Table Footer 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>TD 1.1</td>
            <td>TD 1.2</td>
            <td>TD 1.3</td>
        </tr>
        <tr>
            <td>TD 2.1</td>
            <td>TD 2.2</td>
            <td>TD 2.3</td>
        </tr>
        <tr>
            <td>TD 3.1</td>
            <td>TD 3.2</td>
            <td>TD 3.3</td>
        </tr>
    </tbody>
    
            </table>

            <div class="ss-c-data_table--pagination">
                <ul class="ss-c-pagination ss-c-pagination--left">
                    <li><a href="#">Prev</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">Next</a></li>
                </ul>
            </div>
        </div>