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.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.