4 ms·

I think I don't need the 2022 version, but the 2021 version. Or even the 2012 version, lol! I still prefer to use tables to layout my websites. Question: Say

by Timja 4y ago

I think I don't need the 2022 version, but the 2021 version. Or even the 2012 version, lol! I still prefer to use tables to layout my websites. Question: Say I want a layout that has a top row, a middle row and a bottom row. Each row gets 33% of the screen space. Unless the content does not fit. Then the row should expand to the content. Here is the table version: https://jsfiddle.net/vg2ey8r9/ https://jsfiddle.net/vg2ey8r9/ How do you do that without a table?

cjblomqvist 4y ago
Eg grid + vh unit. Look them up and you should find plenty content!
- Timja 4y ago
  When I try that, the rows do not expand if the content is larger than 33% of the screen height: https://jsfiddle.net/3hfosn5k/ https://jsfiddle.net/3hfosn5k/ Scroll down and you will see that the blue color of the bottom row ends and the text overflows it. But I want what table cells do: Expand if their content is too large to fi.
  - jahewson 4y ago
    Don't put the grid on the body: https://jsfiddle.net/y15qszjp/ https://jsfiddle.net/y15qszjp/
  - shadowfoxx 4y ago
    Hey there, I thought about this for a little bit because I find table layouts more pain than they are worth and the secret sauce that's missing from the examples above is nesting! Just like Tables have <table> and then <tr> - your div's need a similar parent-child relationship to work. Here's a working fiddle: https://jsfiddle.net/0389jsca/ https://jsfiddle.net/0389jsca/
Semaphor 4y ago
CSS Grid.
- Timja 4y ago
  Easier said than done. See my other replies in this thread.
robin_reala 4y ago
CSS Grid. It’s a mostly simple spec that allows for what you’re asking for and a whole bunch more (including different grids for different screen sizes, which tables definitely don’t do). Probably start with https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/
- Timja 4y ago
  Are you sure? Have you tried? When I try, I don't get the nice behavior of tables, but a stiff layout that does not adapt to its content. Instead the content overflows the rows: https://jsfiddle.net/3hfosn5k/ https://jsfiddle.net/3hfosn5k/ The nice thing about tables is that I know the table cells will always surround their content. Nothing will flow out of the cells.
  - speakeasyalexa 4y ago
    Hi friend, if you change the `height` values to `min-height` in that fiddle, I think you get the behavior you're looking for.
  - nicoburns 4y ago
    Grid tracks (rows and columns) can be content sized. You just have to set the dimensions to something other than a concrete size (you have used `33vh` here). See the auto, min-content, max-content and fit-content values for height/width (https://developer.mozilla.org/en-US/docs/Web/CSS/height https://developer.mozilla.org/en-US/docs/Web/CSS/height). You can get close to table-like behaviour by setting the height to `fit-content(33vh)`. There is also a minmax function which allows you to set minimums and maximums and have it content size between that. One of the nice things about grid is that you can size the tracks on the parent element, and all you have to do on the children is specify which rows/columns they span. It works much better when you want to do the sort of things you use rowspan and colspan for with tables. EDIT: Setting height: 100% was also preventing the grid from expanding. Try this JSFiddle https://jsfiddle.net/c3m2194b/ https://jsfiddle.net/c3m2194b/
    - 4y ago
flupe 4y ago
Absolutely perplexed by the other answers that think CSS grid is a hammer for every nail. In your example without a table, you can just drop `display grid` and set `div {min-height: 33vh}`.
jahewson 4y ago
Flexbox can do it https://jsfiddle.net/fenys70z/ https://jsfiddle.net/fenys70z/
- squeaky-clean 4y ago
  Add display: flex; align-items: center; margin: 1px; To `.container div` to get the vertical centering in the OP comment and the slight border. https://jsfiddle.net/g4qv2dr6/1/ https://jsfiddle.net/g4qv2dr6/1/ The border still kind of looks better on the table one, it's like the flexbox border is not the same size vertically and horizontally. Once you add enough text that they need to re-shape, they both behave differently. I kind of like the look of the flexbox one better though. Table https://jsfiddle.net/gs73eyd5/1/ https://jsfiddle.net/gs73eyd5/1/ Flexbox https://jsfiddle.net/g4qv2dr6/2/ https://jsfiddle.net/g4qv2dr6/2/ Also they both break pretty badly if you put some content so long that would require an automatic line-break (make sure you scroll to the right to see) With flexbox the content overflows outside of the container, but it preserves the sizing of the other elements. Table expands the whole container but in doing so ruins the other two rows. https://jsfiddle.net/ysu7fgk1/ https://jsfiddle.net/ysu7fgk1/ vs https://jsfiddle.net/q6dcph0x/ https://jsfiddle.net/q6dcph0x/
gherkinnn 4y ago
But now I'm on a wide screen and want the lower two containers side-by-side with the top element spanning across the top. You can't do that with tables. And that request will come.
kitten_mittens_ 4y ago
With grid: https://jsfiddle.net/1oghfL9s/ https://jsfiddle.net/1oghfL9s/
- seydor 4y ago
  does not expand the table if the content doesnt fit https://i.imgur.com/K1gOKGL.png https://i.imgur.com/K1gOKGL.png

by Timja 4y ago

cjblomqvist 4y ago

Eg grid + vh unit. Look them up and you should find plenty content!

Timja 4y ago
When I try that, the rows do not expand if the content is larger than 33% of the screen height: https://jsfiddle.net/3hfosn5k/ https://jsfiddle.net/3hfosn5k/ Scroll down and you will see that the blue color of the bottom row ends and the text overflows it. But I want what table cells do: Expand if their content is too large to fi.
- jahewson 4y ago
  Don't put the grid on the body: https://jsfiddle.net/y15qszjp/ https://jsfiddle.net/y15qszjp/
- shadowfoxx 4y ago
  Hey there, I thought about this for a little bit because I find table layouts more pain than they are worth and the secret sauce that's missing from the examples above is nesting! Just like Tables have <table> and then <tr> - your div's need a similar parent-child relationship to work. Here's a working fiddle: https://jsfiddle.net/0389jsca/ https://jsfiddle.net/0389jsca/

Semaphor 4y ago

CSS Grid.

Timja 4y ago
Easier said than done. See my other replies in this thread.

robin_reala 4y ago

CSS Grid. It’s a mostly simple spec that allows for what you’re asking for and a whole bunch more (including different grids for different screen sizes, which tables definitely don’t do). Probably start with https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/

Timja 4y ago
Are you sure? Have you tried? When I try, I don't get the nice behavior of tables, but a stiff layout that does not adapt to its content. Instead the content overflows the rows: https://jsfiddle.net/3hfosn5k/ https://jsfiddle.net/3hfosn5k/ The nice thing about tables is that I know the table cells will always surround their content. Nothing will flow out of the cells.
- speakeasyalexa 4y ago
  Hi friend, if you change the `height` values to `min-height` in that fiddle, I think you get the behavior you're looking for.
- nicoburns 4y ago
  Grid tracks (rows and columns) can be content sized. You just have to set the dimensions to something other than a concrete size (you have used `33vh` here). See the auto, min-content, max-content and fit-content values for height/width (https://developer.mozilla.org/en-US/docs/Web/CSS/height https://developer.mozilla.org/en-US/docs/Web/CSS/height). You can get close to table-like behaviour by setting the height to `fit-content(33vh)`. There is also a minmax function which allows you to set minimums and maximums and have it content size between that. One of the nice things about grid is that you can size the tracks on the parent element, and all you have to do on the children is specify which rows/columns they span. It works much better when you want to do the sort of things you use rowspan and colspan for with tables. EDIT: Setting height: 100% was also preventing the grid from expanding. Try this JSFiddle https://jsfiddle.net/c3m2194b/ https://jsfiddle.net/c3m2194b/
  - 4y ago

flupe 4y ago

Absolutely perplexed by the other answers that think CSS grid is a hammer for every nail. In your example without a table, you can just drop `display grid` and set `div {min-height: 33vh}`.

jahewson 4y ago

Flexbox can do it https://jsfiddle.net/fenys70z/ https://jsfiddle.net/fenys70z/

squeaky-clean 4y ago
Add display: flex; align-items: center; margin: 1px; To `.container div` to get the vertical centering in the OP comment and the slight border. https://jsfiddle.net/g4qv2dr6/1/ https://jsfiddle.net/g4qv2dr6/1/ The border still kind of looks better on the table one, it's like the flexbox border is not the same size vertically and horizontally. Once you add enough text that they need to re-shape, they both behave differently. I kind of like the look of the flexbox one better though. Table https://jsfiddle.net/gs73eyd5/1/ https://jsfiddle.net/gs73eyd5/1/ Flexbox https://jsfiddle.net/g4qv2dr6/2/ https://jsfiddle.net/g4qv2dr6/2/ Also they both break pretty badly if you put some content so long that would require an automatic line-break (make sure you scroll to the right to see) With flexbox the content overflows outside of the container, but it preserves the sizing of the other elements. Table expands the whole container but in doing so ruins the other two rows. https://jsfiddle.net/ysu7fgk1/ https://jsfiddle.net/ysu7fgk1/ vs https://jsfiddle.net/q6dcph0x/ https://jsfiddle.net/q6dcph0x/

gherkinnn 4y ago

But now I'm on a wide screen and want the lower two containers side-by-side with the top element spanning across the top. You can't do that with tables. And that request will come.

kitten_mittens_ 4y ago

With grid: https://jsfiddle.net/1oghfL9s/ https://jsfiddle.net/1oghfL9s/

seydor 4y ago
does not expand the table if the content doesnt fit https://i.imgur.com/K1gOKGL.png https://i.imgur.com/K1gOKGL.png