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; }
Browser 572e63
The empty-cells
property is ed in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer 8+, and on Android and iOS.