Menu
I've done a little bit of research on this, but I just wanted to ask to people who'd know much better than I.
Is it true that setting a height to a table cell only acts as min-height? I know this is true in Firefox, but what other browsers does this happen in?
769
Tables and table cells don't use the min-height property, setting their height will be the min-height as tables will expand if the content stretches them. Show activity on this post. Simply use the css entry of min-height to one of the cells of your table row. Works on old browsers too.
The difference between height and min-height is that height defines a value for the height and that's how tall the element will be. min-height says that the minimum height is some value but that the element can continue to grow past that defined height if needed (like the content inside makes it taller or whatever).
Min height 100vh means the element should occupy the web browser viewport height. This is always 100 percent of the web browser's viewport height. If there is more content, the element will stretch more than the viewport's height, which is a code example that will clear things up.
The min-height property in CSS is used to set the minimum height of a specified element. The min-height property always overrides both height and max-height . Authors may use any of the length values as long as they are a positive value.
Short answer: YES. I tried to load following code:
<table border="0" style="background-color: yellow;"> <tr style="background-color: green;"> <td>row 0 cell 0</td> <td>row 0 cell 1</td> </tr> <tr style="background-color: green;"> <td height="50">row 1 cell 0</td> <td>row 1 cell 1</td> </tr> <tr style="background-color: green;"> <td style="height: 50px;">row 2 cell 0</td> <td>row 2 cell 1</td> </tr> </table> Both (height and style) work the same in browsers I tried:
126
from: http://www.w3.org/TR/CSS21/visudet.html#propdef-max-height
In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.
from: http://www.w3.org/TR/CSS21/tables.html#height-layout
The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's computed 'height', the computed 'height' of each cell in the row, and the minimum height (MIN) required by the cells. A 'height' value of 'auto' for a 'table-row' means the row height used for layout is MIN. MIN depends on cell box heights and cell box alignment (much like the calculation of a line box height). CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values. CSS 2.1 does not define the meaning of 'height' on row groups.
In CSS 2.1, the height of a cell box is the minimum height required by the content. The table cell's 'height' property can influence the height of the row (see above), but it does not increase the height of the cell box.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
