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

Question

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

Answer 1

利用:empty

演示（tfoot在tbody没有行时显示）

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

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

有内容tfoot时隐藏tbody

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

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

演示 2

---

解释：

修改太多，我只想提供 2 个选择器，第一个是table tbody:empty + tfoot选择IS EMPTYtfoot时，第二个是IS NOT空时选择。tbody table tbody:not(:empty) + tfoottfoottbody

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

Answer 2

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

<tbody>
</tbody>

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

如果您可以严格指望tbody元素<tbody></tbody>没有行时，您可以使用

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