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 |