Menu icon Foundation
Resizing à table on a small screens

How is it possible to resize a table on a small screen. Actually, if I just put a table in a row; it is not resized at all or it takes the full screen width. reproduced at F5. Thank you.

tablesmall screens

How is it possible to resize a table on a small screen. Actually, if I just put a table in a row; it is not resized at all or it takes the full screen width. reproduced at F5. Thank you.

Serguei Cambour almost 4 years ago

I found this one: http://foundation.zurb.com/responsive-tables.html, but it was not tested on F5. Today F6 is ready to go. Any other sources ? Thank you.

James Stone almost 4 years ago

If you place your table within the grid it will be the full width of the column or 100%. You could then set different grid settings depending on the breakpoint (small, medium, large, etc.).

If you are looking to do something more radical you will have to write your own CSS and use media queries or the new sass breakpoint mixin in foundation for sites 6.

Serguei Cambour almost 4 years ago

Thank you James! What I was looking for is to keep some little space on the left and on the right of the table and have the table resized on a small screens. Sure, my table in the row, that's why it took the full size. What is strange as well is that in Chrome the minimum width of the screen is smaller than in Safari. And the last table column is just cut off.

James Stone almost 4 years ago

Try wrapping it in a centered column

.row>.medium-8.columns.medium-centered

Or you can add left and right margin to the table element in a medium-up media query.

-James

Serguei Cambour almost 4 years ago

I tried as you said. Unfortunately, the last columns stayed cut-off. So, the only solution I found is to use responsive-tables JS and CSS (described in my previous comment). Thank you for your help and your time, James.