Horizontal Scroll Table in Bootstrap CSS

Question

How could I make it so that a table inside a container with its own width does not follow the width of the container and instead  retain the table s width when it s not inside the container  I have a very wide table that I want to fit inside a col-md-9 container and it displays bad because it squeezes the table to fit to the container  I have tried min-width for the table but it is not flexible as adding more columns to my table will squeeze it again  Would it be possible to make the table s width auto while not following the parent s width    lt div class  col-md-9  style  overflow-x  auto  gt       lt table class  table table-bordered  style  width auto  gt       lt tbody gt           lt tr gt                 contents          lt  tr gt       lt tbody gt       lt  table gt   lt  div gt

User · Accepted Answer

Here is one possiblity for you if you are using Bootstrap 3

live view: http://fiddle.jshell.net/panchroma/vPH8N/10/show/

edit view: http://jsfiddle.net/panchroma/vPH8N/

I'm using the resposive table code from http://getbootstrap.com/css/#tables-responsive

ie:

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

User · Answer

Ciwan  You re right  The table goes to full width  much too wide   Not a good solution  Better to do this   css    scrollme       overflow-x  auto      html    lt div class  scrollme  gt                             lt table class  table table-responsive  gt         lt  table gt   lt  div gt    Edit  changing scroll-y to scroll-x

User · Answer

You can also check for bootstrap datatable plugin as well for above issue   It will have a large column table scrollable feature with lot of other options    document  ready function             example   dataTable             scrollX   true                 for more info with example please check out this link

[html] Horizontal Scroll Table in Bootstrap/CSS

Examples related to html

Examples related to css

Examples related to twitter-bootstrap