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.

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
Footer1	Footer2	Footer3	Footer4
Data1	Data2	Data3	Data4
Data1	Data2	Data3	Data4
Data1	Data2	Data3	Data4
Data1	Data2	Data3	Data4

TableList

TableList uses html5 data attributes to render tables vertically on smaller viewports.
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	Data3	Data4
Data1	Data2	Data3	Data4
Data1	Data2	Data3	Data4
Data1	Data2	Data3	Data4

Tables Responsive tables for cross-device presentation.

Like ResponsiveBP?