В 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.
Свързани
display
visibility
:empty
Повече информация
- CSS Ниво 2 спец
- Справка за MDN
- Демонстрация на SitePoint на CodePen
- Слоеве на таблици и демонстрация на прозрачност на CodePen
Поддръжка на браузър
Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
---|---|---|---|---|---|---|
1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |