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.
š Neural Networks from Scratch - Presale
I'm writing a book about the timeless foundational concepts of neural networks for JavaScript developers. Go from if-else to weights and biases by building tiny AI models from scratch!
š Neural Networks from Scratch - Presale
I'm writing a book about the timeless foundational concepts of neural networks for JavaScript developers. Go from if-else to weights and biases by building tiny AI models from scratch!