CSS свойство empty-cells

Свойствоempty-cellsиспользуется, чтобы установить, должны ли быть отображены границы и фон пустых ячеек таблицы.

Это свойство применяется к таблицам, которые имеют свойство border-collapse со значением "separate".

Значением по умолчанию этого свойства является "show".

Значение по умолчанию	show
Применяется	К элементам, у которых значение display установлено как table-cell.
Наследуется	Да
Анимируемое	Нет
Версия	CSS2
DOM синтаксис	object.style.emptyCells = "hide";

Синтаксис

empty-cells: show | hide | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .show {
      empty-cells: show;
      }
      .hide {
      empty-cells: hide;
      }
      td, th {
      border: 1px solid #1c87c9;
      padding: 0.5rem;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства empty-cells</h2>
    <p>Использовано значение "show":  </p>
    <table class="show">
      <tr>
        <td>Moe</td>
        <td>Larry</td>
      </tr>
      <tr>
        <td>Curly</td>
        <td></td>
      </tr>
    </table>
    <br>
    <p>Использовано значение "hide":</p>
    <table class="hide">
      <tr>
        <td>Moe</td>
        <td>Larry</td>
      </tr>
      <tr>
        <td>Curly</td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

Попробуйте сами!

Пример со значениями "hide" и "show":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .show {
      empty-cells: show;
      }
      .hide {
      empty-cells: hide;
      }
      body {
      background: #1c87c9;
      padding: 25px 0;
      color: #fff;
      font-size: 2em;
      text-align: center;
      }
      table {
      display: flex;
      justify-content: center;
      }
      td {
      background: #fff;
      border: 1px solid #8ebf42;
      padding: 10px 15px;
      color: green;
      }
    </style>
  </head>
  <body>
    <p>Пустые ячейки отображены</p>
    <table class="show">
      <tbody>
        <tr>
          <td>&diams;</td>
          <td></td>
          <td>&diams;</td>
          <td>&diams;</td>
        </tr>
      </tbody>
    </table>
    <p>Пустые ячейки скрыты</p>
    <table class="hide">
      <tbody>
        <tr>
          <td>&diams;</td>
          <td></td>
          <td>&diams;</td>
          <td>&diams;</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
show	Границы и фон пустых ячеек будут отображены. Значение по умолчанию.
hide	Границы и фон пустых ячеек будут скрыты.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.