Prevent collapse of empty rows in HTML table via CSS

by

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.

Leave a Comment

tech