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?

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

If you want the width of the table to go outside of the container wouldn't just be easier to make a col-md-10 or col-md-11 or col-md-12 for the extra width instead? Or are you looking for it to scroll within the container? — Trevor
– Trevor, Commented Nov 9, 2013 at 2:18
I want it to scroll horizontally as I am placing a sidebar beside it. Also, I am planning to dynamically add columns so I can't set a fix width. — Randal Cunanan
– Randal Cunanan, Commented Nov 9, 2013 at 2:25

casperOne · Accepted Answer · 2014-05-04 03:48:43Z

152

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>

edited May 4, 2014 at 3:48

casperOne

74.7k19 gold badges189 silver badges262 bronze badges

answered Nov 10, 2013 at 0:12

David Taiaroa

25.5k7 gold badges67 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

J86 Over a year ago

What about when your massively wide table sits inside a 960px div? I don't get the horizontal scroll bar then! :/

David Taiaroa Over a year ago

@Ciwan, re the horizontal scroll bar ... I don't think my suggestion is necessarily the best solution in all circumstances. It's an option which uses built-in Bootstrap styling though, so this is good. Some other solutions I've seen for colapsable tables are themergency.com/footable , zurb.com/playground/responsive-tables and css-tricks.com/responsive-data-table-roundup

Santhos Over a year ago

It does not work when you have a table with e.g. 30 columns unless I manully narrow the width of my browser window. (Do not ask why the table is so big, the answer would be "the client wants it").

David Taiaroa Over a year ago

Yeah, I think I know what you mean @Santhos. To quote from the BS docs getbootstrap.com/css/#tables , "When viewing on anything larger than 768px wide, you will not see any difference in these tables." If you want to start a JS fiddle, maybe I could play around with it for you

Santhos Over a year ago

Thanks, but there is no need. It has quite easy solution (at least for me), I just need to place the table in a div like in the table responsive case a set overflow to scroll.

|

Guillermo Oramas R. · Accepted Answer · 2019-12-31 02:11:29Z

32

@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

edited Dec 31, 2019 at 2:11

Guillermo Oramas R.

1,3132 gold badges14 silver badges34 bronze badges

answered Sep 18, 2017 at 19:04

Sonobor

3313 silver badges3 bronze badges

1 Comment

Mohammed Shareef C Over a year ago

i think you mean overflow-x instead of overflow-y

Mahesh Jadhav · Accepted Answer · 2015-06-30 08:55:26Z

18

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

answered Jun 30, 2015 at 8:55

Mahesh Jadhav

3112 silver badges5 bronze badges

2 Comments

David Avellan Over a year ago

Wow! Thank you for linking DataTables. That is an amazing library for me. Wish I would have known about it sooner. Mind = Blown, lol!

Huge Over a year ago

The example fails with styles of the background: pasteboard.co/pysDaqPaYgXv.png

Collectives™ on Stack Overflow

Horizontal Scroll Table in Bootstrap/CSS

3 Answers 3

9 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related