Tables

Tables come in three flavours that scale to their container with minimum CSS to promote easy styling.

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

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 turns into 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.

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