Proprietà empty-cells
La proprietà empty-cells indica al browser
come visualizzare lo sfondo e il bordo delle celle
td o celle
th HTML tabella vuote:
mostrarli o meno.
Una cella è considerata vuota nei seguenti casi:
non ci sono caratteri di alcun tipo, la cella contiene
solo spazi (uno o più), caratteri di a capo
o di tabulazione, oppure se la proprietà
visibility
è impostata su hidden.
Per rendere una cella non vuota, ma allo stesso tempo
senza testo visibile, si utilizza il seguente
espediente: nella cella si inserisce una spazio unificatore
.
La proprietà non funziona se è impostata la proprietà border-collapse
con il valore collapse.
Sintassi
selettore {
empty-cells: show | hide;
}
Valori
| Valore | Descrizione |
|---|---|
show |
Lo sfondo e il bordo vengono mostrati per una cella vuota. |
hide |
Lo sfondo e il bordo non vengono mostrati per una cella vuota. |
Valore predefinito: show.
Esempio . Valore show
Attualmente nella tabella alcune celle sono vuote, ma hanno comunque bordo e sfondo:
<table>
<tr>
<td>cella</td>
<td></td>
<td>cella</td>
</tr>
<tr>
<td></td>
<td>cella</td>
<td></td>
</tr>
<tr>
<td>cella</td>
<td>cella</td>
<td>cella</td>
</tr>
</table>
table {
width: 400px;
empty-cells: show;
}
td {
border: 1px solid black;
background-color: #f3f3f3;
text-align: center;
}
:
Esempio . Valore hide
Ora invece le celle vuote non avranno sfondo e bordo:
<table>
<tr>
<td>cella</td>
<td></td>
<td>cella</td>
</tr>
<tr>
<td></td>
<td>cella</td>
<td></td>
</tr>
<tr>
<td>cella</td>
<td>cella</td>
<td>cella</td>
</tr>
</table>
table {
width: 400px;
empty-cells: hide;
}
td {
border: 1px solid black;
background-color: #f3f3f3;
text-align: center;
}
:
Vedi anche
-
la pseudoclasse
empty,
che imposta l'aspetto di un elemento vuoto