CSS. Show TFOOT only when TBODY has no rows

Question

I have a HTML table, with <thead> + <tbody> + <tfoot>. I need to show <tfoot> only when <tbody> has no rows. I know how to do it with JS/jQuery, but maybe there is a pure CSS solution?

Answer 1

Use :empty

Demo (Show tfoot when tbody has no rows)

table tbody:empty + tfoot {
    display: table-footer-group;
}

table tbody + tfoot {
    display: none;
    color: red;
}

Hide tfoot when tbody has some content

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

table tbody + tfoot {
    display: none;
    color: red;
}

Demo 2

---

Explanation:

Too many revisions, I just wanted to provide 2 selectors, first is table tbody:empty + tfoot which will select tfoot if the tbody IS EMPTY, and the second one is table tbody:not(:empty) + tfoot which will select tfoot if tbody IS NOT empty.

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;

Answer 2

I’m afraid it can be done with CSS only in the case that the tbody element is completely empty and does not contain even whitespace. For example,

<tbody>
</tbody>

is not empty, as it contains a linebreak (it has a text node child containing a line break). The :empty selector matches only elements that have no children at all.

If you can count on having the tbody element strictly as <tbody></tbody> when it has no rows, you can use

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