CSS Reference Property

empty-cells 5975e

The empty-cells property specifies how 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. 2995g

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.

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 ed 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 3xs5l

  • Syntax:

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

Values u704t

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 2h2053

table {
    empty-cells: show;
}

table.stats {
    empty-cells: hide;
}
                

Live Demo 6b4m17

Take a look at the live demo:

View this demo on the Codrops Playground

Browser 572e63

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

Further Reading 4s104w

Written by

Last updated June 11, 2020 at 9:29 pm by Mary Lou

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