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

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

最佳答案

使用 :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 IS EMPTY 将选择tbody，第二个是table tbody:not(:empty) + tfoot，如果tfoot IS NOT ojit tbody 将选择ojit_code。

关于html - CSS。仅当 TBODY 没有行时才显示 TFOOT，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19420117/