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-spaceproperty 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-cellsvalue from its parent.
Examples
table {
empty-cells: show;
}
table.stats {
empty-cells: hide;
}
Browser Support
The empty-cells property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer 8+, and on Android and iOS.
