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，第二个一个是table tbody:not(:empty) + tfoot，如果tfoot 不为空，则会选择tbody。

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

Answer 2

我担心只有在tbody元素完全为空且不包含空格的情况下才可以使用CSS。例如，

<tbody>
</tbody>

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

如果，当tbody元素没有行时，您可以指望<tbody></tbody>元素严格为tbody:not(:empty) + tfoot { display: none; }，您可以使用

{{1}}

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

2 个答案: