Often when designing tables on the web you’re bound to come across empty pockets of data. These will be rendered as “blank” table cells, which isn’t always the intended outcome. Let’s take a quick look at how to target and style empty table cells.
:empty
wayThe most popular way to target any empty element is by using - you guessed it - the empty
pseudo-class. This pseudo-class is incredibly simple. You target an element’s empty
state that same way you would target hover
or active
:
table tr td:empty {
opacity: 0;
}
Check out the CodePen examples below for more advanced styling options:
See the Pen Styling Empty Tables Cells with :empty by Bradley Taunt (@bradleytaunt) on CodePen.
You can also include additional pseudo elements to give the user more context about what the empty cells represent:
See the Pen Styling Empty Tables Cells with :empty & pseudo elements by Bradley Taunt (@bradleytaunt) on CodePen.
empty-cells
propertyAlthough using the :empty
pseudo-class can be helpful, it isn’t used just for tables. It can be used for any HTML elements that have a lack of content. So, is there a CSS specific property that can target just table cells?
Let’s take a look at the empty-cells
property:
table {
empty-cells: hide;
}
See the Pen Styling Empty Tables Cells with empty-cells property by Bradley Taunt (@bradleytaunt) on CodePen.
Pros of using empty-cells
:
Some downsides to using this property:
:empty
stateIt doesn’t matter semantically which option you decide to take when styling / hiding empty table cells. Using the :empty
state gives you a lot more flexibility in terms of what you can target (full rows, columns etc), but using the empty-cells
property let’s you simply hide the cells and focus on more important items.
I'm extremely grateful for the support from the "Hall of Fame" supporters:
adast.dk
alessandrocuzzocrea.com
alexeystar.com
arc-x.org
artemislena.eu
b0ba.dev
cleberg.net
danielsada.tech
dieses-veganismus.de
gtrr.artemislena.eu
iosis-labs.com
jakobmagnusson.se
jamieonkeys.dev
kristianscott.co.uk
lukealexdavis.co.uk
miniskirt.me
nicksherman.com
simone.org
t0.vc
tedmagaoay.com
willem.com
wonger.dev
xslendi.xyz
zoraster.org
If you too would like to support this project and help fund more articles like this one:
Become a supporter today →