Table Elements

Responsive provides tables with three basic styles with the minimum of css. Simple to hook into to edit for your needs.

Basic Layout

The basic table has no classes added to it. We've just used the defaults as set in Normalize.css and added a few properties to make it better fit fluid layouts.

Standard Table

Header	Header	Header
Data	Data	Data
Data	Data	Data
Data	Data	Data

Bordered Table

Add the class .table-bordered to the table.

Header	Header	Header
Data	Data	Data
Data	Data	Data
Data	Data	Data

Striped Table

Add the class .table-striped to the table. If IE8 support is required, add class .table-row-alt to the appropriate table row.

Header	Header	Header
Data	Data	Data
Data	Data	Data
Data	Data	Data

Combined Styles

The table styles can be easily combined.

Header	Header	Header
Data	Data	Data
Data	Data	Data
Data	Data	Data

Markup

<table>
    <thead>
        <tr>
            <th scope="col">Header</th>
            <th>Header</th>
            <th>Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Data</th>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th scope="row">Data</th>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th scope="row">Data</th>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>

Responsive Tables

Two further types of responsive table are available in the framework. A simple type that adds a horizontal scrollbar to your table on smaller viewports and a more flexible type that grows from a list on smaller viewports.

Table with overflow wrapper

Wrap the table in a container with the class .table-scrollable.

Header1	Header2	Header3	Header4
Header1	Header2	Header3	Header4
Data1	Data2	Data3	Data4
Data1	Data2	Data3	Data4
Data1	Data2	Data3	Data4
Data1	Data2	Data3	Data4

TableList

TableList requires a little bit more markup to render correctly on smaller devices using data attributes data-thead and data-tfoot but offers much more flexibility in display making it much easier to read the data. Adding the attribute data-table-list will automate that for you using the JavaScript Data API.

Header1	Header2	Header3	Header4
Footer1	Footer2	Footer3	Footer4
Data1	Data2 with a larger amount of copy to demonstrate what happens when we drop down the display width to less than 48em.	Data3	Data4
Data1	Data2	Data3	Data4
Data1	Data2	Data3	Data4
Data1	Data2	Data3	Data4

Markup

<table class="table-list table-striped table-bordered">
    <thead>
        <tr>
            <th scope="col">Header1</th>
            <th>Header2</th>
            <th>Header3</th>
            <th>Header4</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th scope="col">Footer1</th>
            <th>Footer2</th>
            <th>Footer3</th>
            <th>Footer4</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th scope="row" data-thead="Header1" data-tfoot="Footer1">Data1</th>
            <td data-thead="Header2" data-tfoot="Footer2">
                Data2 with a larger amount of copy to demonstrate what happens 
                when we drop down the display width to less than 48em.
            </td>
            <td data-thead="Header3" data-tfoot="Footer3">Data3</td>
            <td data-thead="Header4" data-tfoot="Footer4">Data4</td>
        </tr>
        <tr>
            <th scope="row" data-thead="Header1" data-tfoot="Footer1">Data1</th>
            <td data-thead="Header2" data-tfoot="Footer2">Data2</td>
            <td data-thead="Header3" data-tfoot="Footer3">Data3</td>
            <td data-thead="Header4" data-tfoot="Footer4">Data4</td>
        </tr>
        <tr>
            <th scope="row" data-thead="Header1" data-tfoot="Footer1">Data1</th>
            <td data-thead="Header2" data-tfoot="Footer2">Data2</td>
            <td data-thead="Header3" data-tfoot="Footer3">Data3</td>
            <td data-thead="Header4" data-tfoot="Footer4">Data4</td>
        </tr>
        <tr>
            <th scope="row" data-thead="Header1" data-tfoot="Footer1">Data1</th>
            <td data-thead="Header2" data-tfoot="Footer2">Data2</td>
            <td data-thead="Header3" data-tfoot="Footer3">Data3</td>
            <td data-thead="Header4" data-tfoot="Footer4">Data4</td>
        </tr>
    </tbody>
</table>