empty-cellsСвойство в пустых таблицах CSS выбирает ячейки с целью определения того , или не отображать границы и фон на них. Другими словами, он сообщает браузеру, следует ли рисовать границы вокруг ячейки таблицы или заполнять фон, если эта ячейка не содержит содержимого. Это похоже на применение visibilityсвойства к пустым ячейкам таблицы.
table ( empty-cells: show; )Значения
empty-cellsСвойство имеет два основных значения:
show: отображать границу и фон пустой ячейки.hide: не отображает рамку или фон в пустой ячейке.
Также принимаются следующие глобальные значения:
inherit: наследовать значение свойства родительского элемента.initial: использовать определенное значение по умолчанию для свойства.unset: сбросить свойство до унаследованного значения.
Когда это использовать
Это интересное свойство, потому что оно дает CSS возможность проверять разметку HTML на предмет содержимого внутри таблицы и реагировать соответствующим образом. Обычно мы не думаем о CSS как о динамическом языке, но в данном случае он довольно близок.
Хорошим вариантом использования empty-cellsможет быть ситуация, когда вы можете не знать, будет ли таблица содержать пустые точки данных или нет, и вы решили скрыть их. Таблицы раньше были фактическим способом создания макетов веб-страниц, поэтому они могут быть полезным инструментом для отображения и скрытия элементов, когда таблицы используются для представления или где элементы содержат display: tableсвойство.
Демо
См. Pen mPLVzB от CSS-Tricks (@ css-tricks) на CodePen.
Связанный
displayvisibility:empty
Дополнительная информация
- Спецификация CSS уровня 2
- Ссылка MDN
- Демонстрация SitePoint на CodePen
- Слои таблиц и демонстрация прозрачности на CodePen
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |