Празни клетки - CSS-трикове

Anonim

В 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