CSS empty-cells
La proprietà CSS2.1 empty-cells controlla la visibilità delle celle vuote
La proprietà empty-cells è utilizzata nei layout di tabella per decidere se le celle vuote debbano essere visualizzate. Impostando il valore hide, le celle completamente vuote (senza contenuto o spazi) vengono rimosse dal rendering, compresi i loro bordi.
Sintassi
Significato dei valori principali:
show: (valore predefinito) le celle vuote vengono mostrate, inclusi i bordi.
hide: le celle completamente vuote non vengono mostrate, né i loro bordi.
inherit: eredita il valore dal genitore.
Esempio proprietà: empty-cells
Codice Esempio: empty-cells
.table-show, .table-hide {
border-collapse: separate;
border: 3px solid blue;
margin-bottom: 20px;
}.table-show td {
empty-cells: show;
}.table-hide td {
empty-cells: hide;
}td {width: 100px;
height: 40px;
border: 3px solid red;
text-align: center;
}
Contenuto Esempio: empty-cells
Esempio di utilizzo della proprietà empty-cells
In questo esempio, una tabella mostra la differenza tra empty-cells: show e empty-cells: hide:
| 1 | 3 |
| 1 | 3 |
CSS e HTML per l'esempio:
<style>
.table-show, .table-hide {
border-collapse: separate;
border: 3px solid blue;
margin-bottom: 20px;
}
.table-show td {
empty-cells: show;
}
.table-hide td {
empty-cells: hide;
}
td {
width: 100px;
height: 40px;
border: 3px solid red;
text-align: center;
}
</style>
<table class="table-show">
<caption>empty-cells: show</caption>
<tr>
<td>1</td>
<td></td>
<td>3</td>
</tr>
</table>
<table class="table-hide">
<caption>empty-cells: hide</caption>
<tr>
<td>1</td>
<td></td>
<td>3</td>
</tr>
</table>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
