empty-cells (CSS property)

Description

This property controls the rendering of the borders and backgrounds of cells that have no visible content in a table that’s using the separated borders model. If the collapsing model is used, this property is ignored.

The property applies only to elements whose display property has the value table-cell, but since it’s inherited, it can also be set on the whole table, a row group, or a row.

A cell is considered to have no visible content if any of the following cases apply:

• It has no content at all.
• It contains only carriage returns, line feeds, tab characters, or blank spaces.
• Its visibility property is set to hidden.

A non-breaking space is considered to be visible content.

Value

show

The value show means borders will be drawn around empty cells, and backgrounds will be drawn behind them.

hide

The value hide means that no borders or backgrounds will display empty cells. If all the cells in a row have this setting for empty-cells, and none of them have any visible content, the entire row will behave as if it had display:none.

Compatibility

Internet Explorer for Windows versions up to and including 7 don’t support this property, and will almost behave as if all tables had empty-cells set to hide in that borders will be hidden (but backgrounds will be drawn) unless all the cells in the row have no content and then nothing will be drawn.

All browser versions listed above that support this property don’t hide the row completely if all the cells have empty-cells:hide and none of them have any visible content. As mentioned in the “Value” section above the row should be collapsed as though display:none had been applied. However all browsers fail to collapse the space completely, which is why all browsers have been marked as “buggy” in the above compatibility table.

Opera versions up to and including 9.5 will display cell backgrounds, if empty-cells:hide is applied to all the cells, and none of them have any visible content.