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

Question

我有一个HTML表,<thead>+ <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将选择tfoot如果tbody 是空的,而第二个是table tbody:not(:empty) + tfoot将选择tfoot如果tbody IS NOT空.

注意:我正在使用+哪个是相邻选择器,所以如你所见,我有tfoot元素,在tbody元素之后,如果它在tbody你之前 需要使用JS或jQuery在CSS中选择反向.另外,请确保display: table-footer-group;按照Lister先生的指示使用tfoot元素而不是display: block;