Prevent collapse of empty rows in HTML table via CSS
You can add height to table-cell, in this case it'll work like min-height property for other elements (with display: block, display: inline-block, etc). I added another table row with long text to demonstrate it:
td {
height: 22px;
}<table border="1">
<tr>
<td>Row with text</td>
</tr>
<tr>
<td></td><!-- Empty row -->
</tr>
<tr>
<td>Very-very long text with many words, Very-very long text with many words, Very-very long text with many words, Very-very long text with many words, Very-very long text with many words</td>
</tr>
</table>You can't use min-height property, because the specification says:
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.
You can use this code:
td:empty::after{
content: "\00a0";
}
It adds escaped after every originally empty td, solving your issue.
td:empty::after{
content: "\00a0";
}<table border="1">
<tr>
<td>Row with text</td>
</tr>
<tr>
<td></td><!-- Empty row -->
</tr>
<tr>
<td>asd</td>
</tr>
<tr>
<td>dees</td>
</tr>
<tr>
<td></td><!-- Empty row -->
</tr>
</table>Learn more about escaping HTML entities here.