# empty-cells property

The `empty-cells` property tells the browser how to display the background and border of empty td or th cells of HTML tables: show or not.

A cell is considered empty in the following cases: there are no characters at all, the cell contains only a space (one or more), a line break or tab character, or the `visibility` property is set to `hidden`.

To make a cell not empty, but without visible text, use the following technique: write a non-breaking space `&nbsp;` into the cell.

The property does not work if `border-collapse` is set to `collapse`.

## Syntax

`selector { empty-cells: show | hide; }`

## Values

Value | Description
--- | ---
`show` | Background and border are shown on empty cells.
`hide` | Background and border are not shown on empty cells.

Default value: `show`.

## Example . The show value

Now some cells in the table are empty, but they still have a border and background:

`<table> <tr> <td>cell</td> <td></td> <td>cell</td> </tr> <tr> <td></td> <td>cell</td> <td></td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> </tr> </table>` `table { width: 400px; empty-cells: show; } td { border: 1px solid black; background-color: #f3f3f3; text-align: center; }`

:

## Example . The hide value

But now empty cells will not have a background or border:

`<table> <tr> <td>cell</td> <td></td> <td>cell</td> </tr> <tr> <td></td> <td>cell</td> <td></td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> </tr> </table>` `table { width: 400px; empty-cells: hide; } td { border: 1px solid black; background-color: #f3f3f3; text-align: center; }`

:

## See also

- the `empty` pseudo-class
  that specifies how an empty element will look like

← →
↑
en ru