Tables


TableList

JavaScript enabled, add attribute data-table-list

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

TableList Striped

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

TableList Bordered

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

TableList Bordered

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

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