Tables are tricky to stretch and grow, and we suggest three approaches to tackle most issues. In increasing complexity:
.stack
the table cells will stack on smaller screens. See the exampleSqueeze your browser to see the effect of .stack
.
Table Header | Table Header | Table Header | Table Header |
---|---|---|---|
Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Add the class .responsive-table
to the table
tag, and you'll be able to make use of the grid system of clases, such as .show-for-large
.
Note that this requires jQuery, as it will propogate the th
classes to each td
.
Compact | Shown for large | Table Header | Table Header |
---|---|---|---|
Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |