La empty-cellsproprietà in CSS seleziona celle di tabella vuote allo scopo di specificare se visualizzare o meno bordi e sfondi su di esse. In altre parole, dice al browser se disegnare o meno i bordi intorno a una cella di tabella o riempire lo sfondo quando quella cella non contiene contenuto. È un po 'come applicare una visibilityproprietà su celle di tabella vuote.
table ( empty-cells: show; )Valori
La empty-cellsproprietà ha due valori primari:
show: mostra un bordo e uno sfondo su una cella vuota.hide: non visualizza un bordo o uno sfondo su una cella vuota.
Sono accettati anche i seguenti valori globali:
inherit: eredita il valore della proprietà dell'elemento genitore.initial: utilizza il valore predefinito definito per la proprietà.unset: reimposta la proprietà al valore ereditato.
Quando usarlo
Questa è una proprietà interessante perché offre ai CSS la possibilità di controllare il markup HTML per il contenuto all'interno di una tabella e rispondere di conseguenza. Normalmente non pensiamo ai CSS come a un linguaggio dinamico, ma questo è un caso in cui ci si avvicina molto.
Un buon caso d'uso empty-cellspotrebbe essere una situazione in cui potresti non sapere se una tabella conterrà o meno punti dati vuoti e decidi di nasconderli. Le tabelle erano di fatto il modo in cui venivano costruiti i layout delle pagine web, quindi potrebbero essere uno strumento utile per mostrare e nascondere gli elementi quando le tabelle vengono utilizzate per la presentazione o dove gli elementi contengono la display: tableproprietà.
Demo
Vedi Pen mPLVzB di CSS-Tricks (@ css-tricks) su CodePen.
Relazionato
displayvisibility:empty
Maggiori informazioni
- Specifiche CSS livello 2
- Riferimento MDN
- Demo di SitePoint su CodePen
- Livelli tabella e demo trasparenza su CodePen
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |