防止通过CSS折叠HTML表中的空行 [英] Prevent collapse of empty rows in HTML table via CSS

问题描述

我有一个HTML表格，如下所示:

I have a HTML table as follows:

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

运行此命令时，您会看到第二行是折叠的，但我宁愿它未折叠，且高度与第一行相同.一种方法是放置 实体，如下所示:

When you run this you'll see the second row is collapsed, but I'd rather it was rendered uncollapsed, with the same height as the first row. One way of doing this is to put a   entity, as follows:

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

有没有办法通过CSS使用第一个片段中的HTML来获得第二个结果?

Is there a way I can achieve the second result, via CSS, using the HTML from the first snippet?

推荐答案

您可以使用以下代码:

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

它在每个最初为空的td之后添加转义的  ，从而解决了您的问题.

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>

详细了解如何转义HTML实体此处.

Learn more about escaping HTML entities here.

这篇关于防止通过CSS折叠HTML表中的空行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！