CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
zazvorniki
zazvorniki

Reputation: 3602

Bootstrap Horizontal Scrollable Table

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!

Upvotes: 5

Views: 42796

Answers (5)

Deepak Bansode
Deepak Bansode

Reputation: 71

Please put style overflow-x: scroll; to the parent element of table, in this case <div class='box-content'>.

Here is the jsFiddle link : http://jsfiddle.net/AHyuF/38/

Upvotes: 3

Bilal Inamdar
Bilal Inamdar

Reputation: 101

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

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

It will make table scrollable.

Upvotes: 10

Bilal Inamdar
Bilal Inamdar

Reputation: 101

Keep the table width as 

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

and add some more to table div class .box-content

.box-content {overflow-x:auto;}

it will work. Please let me know if it works.

Upvotes: 0

user1887686
user1887686

Reputation: 139

Finally found a solution to table horizontal scrolling for Bootstrap 2.3.2, which I'd like to share. Can't take credit for it though; that goes to James Chambers, author of Bootstrapping MVC.

Just add this to your custom CSS file.

.table-responsive 
{   
    width: 100%;
    margin-bottom: 15px;
    overflow-x: auto;   
    overflow-y: hidden;     
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #000000; 
}

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362780

Put the max width overflow on the tableScroll div (container) instead...

.tableScroll{
    width:200px;
    max-width:200px;
    overflow-x:scroll;
}

Upvotes: 8

Related Questions