通过 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 实现第二个结果？

原文由 Dan Stevens 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 wscourge 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以将 高度 添加到表格单元格，在这种情况下，它会像其他元素 的最小高度 属性一样工作（使用 display: block ， display: inline-block 等）。我添加了另一个带有长文本的表格行来演示它：

 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>

您不能使用 min-height 属性，因为 规范 说：

在 CSS 2.1 中，’min-height’ 和 ‘max-height’ 对表格、内联表格、表格单元格、表格行和行组的影响是未定义的。

原文由 sergdenisov 发布，翻译遵循 CC BY-SA 3.0 许可协议