Menu icon Foundation
Full width Tables in F6?

Hello everyone!

I'm porting a 4 year old project that I built using Bootstrap 2, and I want to use Foundation 6. The application relies heavily on tables, and currently Bootstrap allows the table to use the full width of whatever container it's in by default. Foundation 6 however doesn't seem to do this however.

My question is what am I missing to make the table use the full width of the column or row that its situated in? I want to avoid using my own custom fix for this if there is a more official way to do it.

Thanks!

tablesfoundation 6responsive tables

Hello everyone!

I'm porting a 4 year old project that I built using Bootstrap 2, and I want to use Foundation 6. The application relies heavily on tables, and currently Bootstrap allows the table to use the full width of whatever container it's in by default. Foundation 6 however doesn't seem to do this however.

My question is what am I missing to make the table use the full width of the column or row that its situated in? I want to avoid using my own custom fix for this if there is a more official way to do it.

Thanks!

Rafi Benkual almost 4 years ago

You can make a fluid width row (100%) by adding this class .expanded

Looks like it's missing from the docs so we'll add it.

Michael Burke almost 4 years ago

I've added that class to the table itself and to the rows, none of which have made it expand?

Craig Ricciuto almost 4 years ago

Hi Rafi. I got here searching for an "official" solution myself. I'm new to Foundation so I'm not sure what you mean in your answer.

I have tried adding the .expanded class to the row div, the column div, and even the table itself but nothing makes the table expand horizontally to take up the entire width of the row and column it lives in.

The only way I can accomplish this is by adding a class to my table directly that has the style 'width: 100%;' in it.

I have previous experience with Bootstrap 3.x only and that is how it works. If Foundation doesn't work like that then so be it. I don't mind adding my own styling just making sure I'm not doing something wrong.

Elias Sarantopoulos almost 4 years ago

Rafi,

Any news on the making the tables responsive on 6? Thank you.

Rafi Benkual almost 4 years ago

Looks like there was an update made here that addresses it: https://github.com/zurb/foundation-sites/commit/753cc72567926624897993ee4c505d0a4874514e