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

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

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

Значение по умолчанию для свойства empty-cells — show.

Начальное значение	show
Применяется к	элементам table-cell
Наследуется	Нет
Анимация	Нет
Версия	CSS2
Синтаксис DOM	object.style.emptyCells = "hide";

Синтаксис

Синтаксис свойства CSS empty-cells

css

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

Пример свойства empty-cells:

Пример использования значений show и hide свойства CSS empty-cells

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .show {
        empty-cells: show;
      }
      .hide {
        empty-cells: hide;
      }
      td,
      th {
        border: 1px solid #1c87c9;
        padding: 0.5rem;
      }
      table {
        border-collapse: separate;
      }
    </style>
  </head>
  <body>
    <h2>Empty-cells property example</h2>
    <p>Here the "show" value is used: </p>
    <table class="show">
      <tr>
        <td>Moe</td>
        <td>Larry</td>
      </tr>
      <tr>
        <td>Curly</td>
        <td></td>
      </tr>
    </table>
    <br />
    <p>In this table the "hide" value is used:</p>
    <table class="hide">
      <tr>
        <td>Moe</td>
        <td>Larry</td>
      </tr>
      <tr>
        <td>Curly</td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

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

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

Пример значений hide и show свойства CSS empty-cells

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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 {
        border-collapse: separate;
      }
      td {
        background: #fff;
        border: 1px solid #8ebf42;
        padding: 10px 15px;
        color: green;
      }
    </style>
  </head>
  <body>
    <p>The empty cells are shown</p>
    <table class="show">
      <tbody>
        <tr>
          <td>&diams;</td>
          <td></td>
          <td>&diams;</td>
          <td>&diams;</td>
        </tr>
      </tbody>
    </table>
    <p>The empty cells are hidden</p>
    <table class="hide">
      <tbody>
        <tr>
          <td>&diams;</td>
          <td></td>
          <td>&diams;</td>
          <td>&diams;</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Try it Yourself »

Результат

CSS empty-cells Property with both values

Значения

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

Практика

Какова функция свойства 'empty-cells' в CSS?

Определяет, применяются ли границы и фон к пустым ячейкам в таблицах.Устанавливает цвет пустых ячеек в таблицах.Определяет расстояние между ячейками в таблицах.Используется для скрытия пустых ячеек в таблицах.

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

Синтаксис ​

Пример свойства empty-cells: ​

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

Результат ​

Значения ​