Foundation 5 table with horizontal scroll bar

Question

I was wondering if Zurb Foundation has a fix in table with many columns. Apparently, 3 to 6 columned table will still be responsive... but my table has 12 columns. And I thought that the framework will put the scroll bars to the table.

But my problem is, it does not. So how can I put horizontal scroll bar to the table? I want to give the table a scroll bar when it reaches the horizontal boundary of its parent (in my case, a div):

table.oversized { overflow-x: scroll; }

But it does not work. I try to put the scroll bar instead to the parent div:

div.parent-of-an-oversize-table { overflow-x: scroll; }

And..... it works. But the width is longer by ~100px.

Can someone help me with this problem? I'm looking for a solution within the Zurbs Foundation framework but if there is another solution outside the framework, is still appreciated.

Thanks.

Answer 1

The table layout has to have table-layout: fixed; -- but according to what I've read you will have a hard time getting a table to take a scrollbar reliably and are better off applying it to the containing div.

For instance, this solution:

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

gives you a scrollbar in FF and Chrome but no dragger so the scrollbar is useless.

I tried wrapping the table in a div in Foundation 5 using "large-12 centered columns" on the div and didn't see the 100px you described. Please include how the containing div was formatted using the F5 grid, since that effects the behavior of children.