Bootstrap Horizontal Scrollable Table

Question

I have been struggling with this for a while now. I have a table in bootstrap that if it gets to wide I would like to make it scrollable so they can at least scroll to see the information.

My html is pretty simple just a table within a box

<div class='box'>
  <div class='box-header'>
    <h4>Title</h4>
  </div>
  <div class='box-content'>
    <table>
    <!--Table Stuff-->
    </table>
  </div>
</div>

and I have tries the usual of setting a width and then an overflow-x:scroll; like so

table{
 width:100px;
 max-width:100px;
 overflow-x:scroll;
}

but nothing seems to work.

I have a jsFiddle set up here. http://jsfiddle.net/AHyuF/3/

Any help would be much, much appreciated!

Answer 1

or else you just have to add class "table-responsive" to table div

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

It will make table scrollable.