empty-cells

The empty-cells property in CSS selects empty table cells for the purpose of specifying whether or not to display borders and backgrounds on them. In other words, it tells the browser whether or not to draw borders around a table cell or fill in the background when that cell contains no content. It’s kind of like applying a visibility property on empty table cells.

table {
  empty-cells: show;
}

Values

The empty-cells property has two primary values:

• show: display a border and background on an empty cell.
• hide: does not display a border or background on an empty cell.

The following global values are also accepted:

• inherit: inherit the property value of the parent element.
• initial: use the defined default value for the property.
• unset: reset the property to its inherited value.

When to Use It

This is an interesting property because it gives CSS the ability to check the HTML markup for content inside of a table and respond accordingly. We don’t normally think of CSS as a dynamic language but this is an instance where it comes pretty close.

A good use case for empty-cells could be a situation where you may not know whether a table will or will not contain empty data points and you decide to hide them. Tables used to be the de-facto way webpage layouts were constructed, so it could be a useful tool for showing and hiding elements when tables are used for presentation or where elements contain the display: table property.

Demo

See the Pen mPLVzB by CSS-Tricks (@css-tricks) on CodePen.

Related

• display
• visibility
• :empty

More Information

• CSS Level 2 spec
• MDN reference
• SitePoint demo on CodePen
• Table layers and transparency demo on CodePen

Browser Support