Can I use a min-height for table, tr or td?
The solution without div
is used a pseudo element like ::after
into first td
in row with min-height
. Save your HTML clean.
table tr td:first-child::after {
content: "";
display: inline-block;
vertical-align: top;
min-height: 60px;
}
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.
So try wrapping the content in a div, and give the div a min-height
jsFiddle here
<table cellspacing="0" cellpadding="0" border="0" style="width:300px">
<tbody>
<tr>
<td>
<div style="min-height: 100px; background-color: #ccc">
Hello World !
</div>
</td>
<td>
<div style="min-height: 100px; background-color: #f00">
Good Morning !
</div>
</td>
</tr>
</tbody>
</table>
It's not a nice solution but try it like this:
<table>
<tr>
<td>
<div>Lorem</div>
</td>
</tr>
<tr>
<td>
<div>Ipsum</div>
</td>
</tr>
</table>
and set the divs to the min-height:
div {
min-height: 300px;
}
Hope this is what you want ...
height
for td
works like min-height
:
td {
height: 100px;
}
instead of
td {
min-height: 100px;
}
Table cells will grow when the content does not fit.
https://jsfiddle.net/qz70zps4/