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ć.
Co znajdziesz w tym wpisie
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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.