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.

What would be the best method to cater this case?

Answer 1

Bootstrap 3 now has Responsive tables out of the box. Hooray! :)

You can check it here: https://getbootstrap.com/docs/3.3/css/#tables-responsive

Add a <div class="table-responsive"> surrounding your table and you should be good to go:

<div class="table-responsive">   <table class="table">     ...   </table> </div> 

To make it work on all layouts you can do this:

.table-responsive {     overflow-x: auto; } 

Answer 2

One option that is available is fooTable. Works great on a Responsive website and allows you to set multiple breakpoints... fooTable Link