šŸ“• LangChain for JavaScript developers is now out!
Build 5 Next.js apps with ChatGPT integrated features using LangChain.

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

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.


Leave a Reply

Your email address will not be published. Required fields are marked *