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

Question

我有一个HTML表格，其中有<thead> + <tbody> + <tfoot>。仅当<tbody>没有行时，我需要显示<tfoot>。我知道如何用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中选择反向。此外，请确保您使用display: table-footer-group;由利斯特先生为tfoot元指出，不display: block;

Answer 2

恐怕可以用CSS只的情况下完成了tbody元素完全是空的，不甚至包含空白。例如，

<tbody> 
</tbody> 

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

如果你可以严格地具有tbody元素<tbody></tbody>计数，当它没有行，你可以使用

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