empty-cellsNieruchomość w pustych komórek tabeli CSS wybiera w celu określenia, czy aby nie wyświetlać obramowania i tła na nich. Innymi słowy, mówi przeglądarce, czy rysować obramowanie wokół komórki tabeli, czy też wypełniać tło, gdy ta komórka nie zawiera treści. To trochę jak stosowanie visibilitywłaściwości do pustych komórek tabeli.
table ( empty-cells: show; )Wartości
empty-cellsNieruchomość ma dwie podstawowe wartości:
show: wyświetla obramowanie i tło w pustej komórce.hide: nie wyświetla obramowania ani tła w pustej komórce.
Akceptowane są również następujące wartości globalne:
inherit: dziedziczy wartość właściwości elementu nadrzędnego.initial: użyj zdefiniowanej wartości domyślnej właściwości.unset: resetuje właściwość do jej odziedziczonej wartości.
Kiedy go używać
Jest to interesująca właściwość, ponieważ umożliwia CSS sprawdzanie znaczników HTML pod kątem zawartości w tabeli i odpowiednie reagowanie. Zwykle nie myślimy o CSS jako o języku dynamicznym, ale jest to przypadek, w którym jest dość blisko.
Dobrym przypadkiem użycia empty-cellsmoże być sytuacja, w której możesz nie wiedzieć, czy tabela będzie zawierać puste punkty danych, czy nie, i zdecydujesz się je ukryć. Tabele były de facto sposobem konstruowania układów stron internetowych, więc może być użytecznym narzędziem do pokazywania i ukrywania elementów, gdy tabele są używane do prezentacji lub gdy elementy zawierają display: tablewłaściwość.
Próbny
Zobacz Pen mPLVzB autorstwa CSS-Tricks (@ css-tricks) na CodePen.
Związane z
displayvisibility:empty
Więcej informacji
- Specyfikacja CSS poziomu 2
- Odniesienie do MDN
- Demo SitePoint na CodePen
- Warstwy tabel i prezentacja przezroczystości na CodePen
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |