CSS Reference Property

empty-cells

The empty-cells property specifies how user agents should render the borders and backgrounds of cells that have no visible content. It allows you to show or hide borders and backgrounds drawn around/behind empty cells.

Empty cells and cells with the visibility property set to hidden are considered to have no visible content, and hence can be styled using the empty-cells property.

A value of hide means that no borders or backgrounds are drawn around/behind empty cells. Furthermore, if all the cells in a row have a value of hide and have no visible content, then the row has zero height and there is vertical border-spacing on only one side of the row.

Table cells are empty unless they contain one or more of the following:

  • floating content (including empty elements),
  • in-flow content (including empty elements) other than white space that has been collapsed away by the white-space property handling.

Trivia & Notes

The empty-cells property only applies when the border-collapse value is separate, because otherwise, if the border model is collapsed, the borders of cells would be joined and shared and hence their borders would be shared, and it wouldn’t be possible to hide the borders of one cell without hiding those of the adjacent cells.

Official Syntax

  • Syntax:

    empty-cells: show | hide | inherit
  • Initial: show
  • Applies To: ‘table-cell’ elements
  • Animatable: no

Values

show
The backgrounds and borders of empty cells are visible.
hide
The backgrounds and borders of empty cells are hidden.
inherit
The element inherits its empty-cells value from its parent.

Examples

table {
    empty-cells: show;
}

table.stats {
    empty-cells: hide;
}
                

Live Demo

Take a look at the live demo:

View this demo on the Codrops Playground

Browser Support

The empty-cells property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer 8+, and on Android and iOS.

Further Reading

Written by

Last updated December 11, 2016 at 9:29 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.