empty-cellsProprietatea în CSS selectează celule de masă goale în scopul de a specifica dacă sunt sau nu pentru a afișa frontiere și fundaluri pe ele. Cu alte cuvinte, îi spune browserului dacă trebuie să deseneze sau nu margini în jurul unei celule de masă sau să completeze fundalul atunci când acea celulă nu conține conținut. Este ca și cum ai aplica o visibilityproprietate pe celulele de tabel goale.
table ( empty-cells: show; )Valori
empty-cellsProprietatea are două valori principale:
show: afișează o margine și un fundal pe o celulă goală.hide: nu afișează un chenar sau fundal pe o celulă goală.
Sunt acceptate și următoarele valori globale:
inherit: moștenește valoarea proprietății elementului părinte.initial: utilizați valoarea implicită definită pentru proprietate.unset: resetați proprietatea la valoarea sa moștenită.
Când să-l folosiți
Aceasta este o proprietate interesantă, deoarece oferă CSS posibilitatea de a verifica marcajul HTML pentru conținut în interiorul unui tabel și de a răspunde în consecință. În mod normal, nu ne gândim la CSS ca la un limbaj dinamic, dar acesta este un caz în care se apropie destul de mult.
Un bun caz de utilizare pentru empty-cellsar putea fi o situație în care este posibil să nu știți dacă un tabel va conține sau nu puncte de date goale și decideți să le ascundeți. Tabelele erau de facto modul în care erau construite aspectele paginilor web, deci ar putea fi un instrument util pentru afișarea și ascunderea elementelor atunci când tabelele sunt utilizate pentru prezentare sau unde elementele conțin display: tableproprietatea.
Demo
Vedeți Pen mPLVzB de CSS-Tricks (@ css-tricks) pe CodePen.
Legate de
displayvisibility:empty
Mai multe informatii
- Spec. Nivel CSS 2
- Referință MDN
- Demo SitePoint pe CodePen
- Straturi de tabel și demonstrație de transparență pe CodePen
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |