CSS。仅当 TBODY 没有行时才显示 TFOOT

Posted 2023-03-06

【中文标题】CSS。仅当 TBODY 没有行时才显示 TFOOT

【英文标题】：CSS. Show TFOOT only when TBODY has no rows

【发布时间】：2013-10-25 13:16:45

【问题描述】：

我有一个 html 表格，带有 <thead> + <tbody> + <tfoot>。只有当<tbody> 没有行时，我才需要显示<tfoot>。我知道如何用 JS/jQuery 来做，但也许有一个纯 CSS 的解决方案？

【问题讨论】：

一个问题应该是独立的，而不是暗示标题。

您应该澄清 TBODY 指的是什么。紧接在 tfoot 元素之前的 tbody 元素？

【参考方案1】：

恐怕只有在 tbody 元素完全为空且不包含空格的情况下才能使用 CSS 完成。例如，

<tbody>
</tbody>

不为空，因为它包含换行符（它有一个包含换行符的文本节点子节点）。 :empty selector 只匹配根本没有子元素的元素。

如果你可以指望tbody元素在没有行的情况下严格地作为<tbody></tbody>，你可以使用

tbody:not(:empty) + tfoot 
   display: none;

【讨论】：

是的，空格很重要。但这对我来说不是问题。

【参考方案2】：

使用:empty

Demo（当tbody 没有行时显示tfoot）

table tbody:empty + tfoot 
    display: table-footer-group;


table tbody + tfoot 
    display: none;
    color: red;

当tbody 有一些内容时隐藏tfoot

table tbody:not(:empty) + tfoot 
    display: block;


table tbody + tfoot 
    display: none;
    color: red;

Demo 2

---

解释：

修改太多，我只想提供2个选择器，第一个是table tbody:empty + tfoot，如果tbodyIS EMPTY会选择tfoot，第二个是table tbody:not(:empty) + tfoot如果tbody IS NOT 为空，将选择tfoot。

注意：我使用的是+，它是一个相邻的选择器，所以如你所见，我 有tfoot 元素，在tbody 元素之后，如果它在之前 tbody 比您在选择反向时需要使用 JS 或 jQuery CSS。另外，请确保您使用李斯特先生指出的 display: table-footer-group; 用于 tfoot 元素，而不是 display: block;

【讨论】：

当前面的tbody 没有行时，代码隐藏 tfoot。问题是如何在这种情况下显示它。

@JukkaK.Korpela 感谢您指出，选择器很完美，只需要再添加 1 个 :)

我明白了。非常感谢！