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 *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X