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

Question

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

Answer 1

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

<tbody>
</tbody>

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

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

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

Answer 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;