通过CSS防止HTML表中的空行崩溃

Question

我有一个HTML表格如下:

<table border="1">
    <tr>
        <td>Row with text</td>
    </tr>
    <tr>
        <td></td><!-- Empty row -->
    </tr>
</table>

当你运行它时,你会看到第二行是折叠的,但我更确切地说它是未折叠的,与第一行的高度相同.这样做的一种方法是放置一个 实体,如下所示:

<table border="1">
    <tr>
        <td>Row with text</td>
    </tr>
    <tr>
        <td>&nbsp;</td><!-- Empty row -->
    </tr>
</table>

有没有办法通过CSS使用第一个片段中的HTML来实现第二个结果？

Answer 1

您可以使用此代码:

td:empty::after{
  content: "\00a0";
}

它会在每个原始空白之后添加转义 ,解决您的问题. td

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>

了解有关在此处转义HTML实体的详细信息.