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

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

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

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

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

[html] Responsive table handling in Twitter Bootstrap

Examples related to html

Examples related to twitter-bootstrap

Examples related to css