Demonstration and documentation

Tables are tricky to stretch and grow, and we suggest three approaches to tackle most issues. In increasing complexity:

  1. If it's not broke, don't fix it: sometimes defaults do fine.
  2. Stack: If you add .stack the table cells will stack on smaller screens. See the example
  3. Responsive: You can also use the grid classes to specify witdth at corresponding sizes. See the example

Stacking table

Squeeze 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

Responsive table

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