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

User · Answer

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:

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

User · Answer

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  lt div class  table-responsive  gt  surrounding your table and you should be good to go    lt div class  table-responsive  gt     lt table class  table  gt             lt  table gt   lt  div gt    To make it work on all layouts you can do this    table-responsive       overflow-x  auto

User · Answer

If you are using Bootstrap 3 and Less you could apply the responsive tables to all resolutions by updatingthe file   tables less   or overwriting this part    media  max-width   screen-xs       table-responsive       width  100       margin-bottom  15px      overflow-y  hidden      overflow-x  scroll      border  1px solid  table-border-color          Tighten up spacing and give a background color      gt   table         margin-bottom  0        background-color   fff            Ensure the content doesn t wrap        gt  thead         gt  tbody         gt  tfoot            gt  tr              gt  th             gt  td               white-space  nowrap                                              Special overrides for the bordered tables      gt   table-bordered         border  0            Nuke the appropriate borders so that the parent can handle them        gt  thead         gt  tbody         gt  tfoot            gt  tr              gt  th first-child             gt  td first-child               border-left  0                         gt  th last-child             gt  td last-child               border-right  0                                 gt  tr last-child              gt  th             gt  td               border-bottom  0                                              With    media  max-width   screen-lg       table-responsive       width  100         Note how I changed the first line  screen-XX value   I know making all tables responsive may not sound that good  but I found it extremely useful  to have this enabled up to LG on large tables  lots of columns    Hope it helps someone

User · Answer

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

[html] Responsive table handling in Twitter Bootstrap

Examples related to html

Examples related to twitter-bootstrap

Examples related to css