How to style empty cells – using :empty and empty-cells

DanielApril 20, 2020

There are cases when we don't have data for all the cells in a table. If you want an easy way to make these specific cells to stand out we can use the :empty pseudo-class selector.

See the Pen
Table with empty highlighted by JS Craft (@js-craft)
on CodePen.

And we can even chain the :empty with the the :before pseudo-class and give the user more context about what the empty cells represent:

See the Pen
mdeVNQq by JS Craft (@js-craft)
on CodePen.

Also, the table element has a special CSS property named, you guessed it, empty-cells.

See the Pen
Hide empty cells by JS Craft (@js-craft)
on CodePen.

The downside with this empty-cells prop is that you can only hide the cels. So for better customization of the cells the :empty may be a better fit.

Have fun, and enjoy the simple things in CSS.