tutoriale

Właściwość CSS empty-cells

Czas czytania: < 1 minut

Właściwość CSS empty-cells w dużym skrócie służy do ukrywanie niewypełnionych pól. Innymi słowy empty-cells informuje przeglądarkę o tym, że jeśli dany element jest pusty nie ma ona go wyświetlać.

Parametry empty-cells

Właściwość empty-cells przyjmuje tylko dwa specyficzne dla siebie parametry:

  • show: wyświetl obramowanie i tło pustej komórki.
  • hide: ukryj obramowanie i tło pustej komórki (empty cell).

Dodatkowo obsługiwane są również parametry globalne:

  • inherit: dziedziczy ustawienia rodzica (nadrzędnego).
  • initial: użyj zdefiniowanej wartości domyślnej dla właściwości.
  • unset: zresetuj właściwość do jej odziedziczonej wartości.

Przykładowa dekaracja CSS

table {
  empty-cells: show;
}

Działanie właściwości empty-cells

Do czego może się przydać?

Jest to ciekawe rozwiązanie w przypadku kiedy z różnych przyczyn decydujemy się na budowę strony internetowej z pomocą tabel. Nie jesteśmy w tedy w stanie przewidzieć czy wszystkie pola zostaną przez nas wypełnione. Dzięki zastosowaniu tej właściwości problem pustych przestrzeni rozwiąże się sam.

Przykłady:

See the Pen mPLVzB by CSS-Tricks (@css-tricks) on CodePen.0

empty-cells