Responsive table handling in Twitter Bootstrap

Question

When a table\'s width exceed the span\'s width, like this page: http://jsfiddle.net/rcHdC/

You will see the table\'s content is outside of the span.

Answer 1

There are many different things you can do when dealing with responsive tables.

I personally like this approach by Chris Coyier:

• http://css-tricks.com/responsive-data-tables/

You can find many other alternatives here:

• http://css-tricks.com/responsive-data-table-roundup/
• http://bradfrost.github.io/this-is-responsive/patterns.html#tables

If you can leverage Bootstrap and get something quickly, you can simply use the class names ".hidden-phone" and ".hidden-tablet" to hide some rows but this approach might to be the best in many cases. More info (see "Responsive utility classes"):

• http://twitter.github.io/bootstrap/scaffolding.html#responsive