пустые ячейки

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

Попробуйте

Это свойство оказывает влияние только когда свойство border-collapse имеет значение separate.

Синтаксис

/* Keyword values */
empty-cells: show;
empty-cells: hide;

/* Global values */
empty-cells: inherit;
empty-cells: initial;
empty-cells: revert;
empty-cells: revert-layer;
empty-cells: unset;

Свойство empty-cells задаётся одним из ключевых слов, перечисленных ниже.

Значения

show: Границы и фоны рисуются так же, как и в обычных ячейках.
hide: Границы и фоны не рисуются.

Формальное определение

Начальное значение	`show`
Применяется к	элементам table-cell
Наследуется	да
Вычисляемое значение	как указано
Тип анимации	дискретный

Формальный синтаксис

empty-cells = 
  show  |
  hide

Примеры

Отображение и скрытие пустых ячеек таблицы

HTML

<table class="table_1">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>
<br />
<table class="table_2">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>

CSS

.table_1 {
  empty-cells: show;
}

.table_2 {
  empty-cells: hide;
}

td,
th {
  border: 1px solid gray;
  padding: 0.5rem;
}

Результат

Спецификации

Спецификация
Спецификация Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) # empty-cells

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`empty-cells`	1	12	1	4	1.2	18	4	10.1	1	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells