CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Randal Cunanan
Randal Cunanan

Reputation: 2529

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>

Upvotes: 67

Views: 273862

Answers (3)

Sonobor
Sonobor

Reputation: 331

@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

Upvotes: 32

Mahesh Jadhav
Mahesh Jadhav

Reputation: 311

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

Upvotes: 18

David Taiaroa
David Taiaroa

Reputation: 25495

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>

Upvotes: 152

Related Questions