Menu icon Foundation
Table scroll on half width

I'm creating table which works fine but I need it to be responsive, so I'm putting it inside div "table-scroll". 

After that, scroll works fine on responsive devices but on larger screens it's only half width 

Where it should be : 

site table tables responsive scroll

I'm creating table which works fine but I need it to be responsive, so I'm putting it inside div "table-scroll". 

After that, scroll works fine on responsive devices but on larger screens it's only half width 

Where it should be : 

Anke O. about 2 years ago

I had the same problem and I wonder why the table-width is set to auto. It seems to work just fine adding min-width: 100%;

Also it seems much more elegant to set the scrollable table's bottom-margin to 0, adding it to the scrolling container instead:

.table-scroll table { margin-bottom: 0; }
.table-scroll { margin-bottom: 1rem; }

Jonathan George about 3 years ago

Update:

table-scroll class have atribute width : auto - that's why it was happening.