W3docs
ru
Войти

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

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

Свойство empty-cells управляет тем, отображаются ли границы и фон пустых ячеек таблицы. Пустая ячейка — это <td> или <th>, не содержащая никакого содержимого. Ячейка с пробелом, &nbsp; или переносом строки не считается пустой, и свойство на неё не влияет.

На этой странице описано, что делает empty-cells, когда оно действительно вступает в силу, какие значения принимает и на что следует обратить внимание.

Когда свойство применяется

empty-cells оказывает видимый эффект только тогда, когда границы ячеек разделены — то есть когда таблица использует border-collapse: separate (значение по умолчанию). При border-collapse: collapse соседние ячейки имеют общую границу, поэтому отдельных границ или фона у пустой ячейки нет и свойство игнорируется.

Поскольку значения по умолчанию — border-collapse: separate и empty-cells: show, пустые ячейки отображаются по умолчанию, и это свойство нужно только для того, чтобы их скрыть.

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

Синтаксис

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

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

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

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

<!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 полностью убирает границу и фон этой ячейки, и она выглядит пустой. Используйте hide, когда таблица может содержать незаполненные ячейки и вы хотите более аккуратный вид — например, в расписании или сетке цен, где не каждый слот заполнен.

Пример с цветным фоном:

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

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

При применении hide пустая ячейка не показывает ни белый фон, ни зелёную границу — она сливается с синим фоном страницы.

Результат

Свойство CSS empty-cells с обоими значениями

Значения

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

Поддержка браузерами

empty-cells является частью CSS2 и поддерживается во всех современных браузерах, включая Chrome, Firefox, Safari, Edge и Opera. Вендорные префиксы не требуются.

Примечания и особенности

  • Свойство не наследуется. Устанавливайте его на table, tr, td или th, к которым хотите его применить (оно каскадно работает визуально, так как ячейки считывают его из собственного вычисленного стиля — обычно его объявляют на table).
  • Оно не действует при border-collapse: collapse, поскольку схлопнутые границы являются общими для ячеек.
  • Ячейка с пробелом, &nbsp; или пустым <img>/элементом не является пустой для этого свойства. Затронуты только ячейки, буквально не содержащие никакого содержимого.
  • Для управления расстоянием между разделёнными ячейками используйте это свойство вместе с border-spacing.

Практика

Практика
Какова функция свойства 'empty-cells' в CSS?
Какова функция свойства 'empty-cells' в CSS?
Was this page helpful?