html - 通过 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>

有没有一种方法可以使用第一个代码段中的 HTML 通过 CSS 实现第二个结果？

Answer 1

您可以使用此代码:

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

它在每个原本为空的 td 之后添加了 escaped  ，解决了您的问题。

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 实体的更多信息 here .