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

Question

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

Answer 1

使用 :empty

Demo (当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;
}

Demo 2

---

解释:

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

Note: I am using + which is an adjacent selector, so as you see, I have tfoot element, after the tbody element, if it is before tbody than you need to use JS or jQuery as you select reverse in CSS. Also, make sure you use display: table-footer-group; as pointed by Mr Lister for tfoot element and not display: block;