The 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   into the cell.

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

Syntax

cssselector {
  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:

html<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>

csstable {
  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:

html<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>

csstable {
  width: 400px;
  empty-cells: hide;
}
td {
  border: 1px solid black;
  background-color: #f3f3f3;
  text-align: center;
}