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 · 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

User · 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    lt div class  table-responsive  gt   lt table class  table  gt       lt  table gt   lt  div gt

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

[html] Horizontal Scroll Table in Bootstrap/CSS

Examples related to html

Examples related to css

Examples related to twitter-bootstrap