Horizontal Scroll Table in Bootstrap/CSS

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?

<div class="col-md-9" style="overflow-x: auto">
    <table class="table table-bordered" style="width:auto">
    <tbody>
        <tr>
          .... contents
        </tr>
    <tbody>
    </table>
</div>

Solution 1:

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>

Solution 2:

@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:

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

Edit: changing scroll-y to scroll-x

Solution 3:

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