W3docs
ru
Войти

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

The empty-cells CSS property defines whether borders and background are shown or not. See the values and try examples with each of them.

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

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

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

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

Синтаксис

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

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

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

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

<!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>
Попробуйте сами »

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

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

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

<!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>
Попробуйте сами »

Результат

CSS empty-cells Property with both values

Значения

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

Практика

Практика

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