Proprietatea empty-cells
Proprietatea empty-cells indică browserului
cum să afișeze fundalul și bordura celulelor
td sau celulelor
th HTML tabelului goale:
să le arate sau nu.
O celulă este considerată goală în următoarele cazuri:
nu există niciun fel de caractere, în celulă se conține
doar spațiu (unul sau mai multe), transfer
de linie sau caracter de tabulare, sau proprietatea
visibility
este setată ca hidden.
Pentru a face o celulă negoală, dar în același timp
fără text vizibil, se utilizează următoarea
metodă: în celulă se scrie un spațiu neruptibil
.
Proprietatea nu funcționează, dacă este setat border-collapse
cu valoarea collapse.
Sintaxă
selector {
empty-cells: show | hide;
}
Valori
| Valoare | Descriere |
|---|---|
show |
Fundalul și bordura sunt afișate la o celulă goală. |
hide |
Fundalul și bordura nu sunt afișate la o celulă goală. |
Valoarea implicită: show.
Exemplu . Valoarea show
Acum în tabel unele celule sunt goale, dar totuși au bordură și fundal:
<table>
<tr>
<td>celulă</td>
<td></td>
<td>celulă</td>
</tr>
<tr>
<td></td>
<td>celulă</td>
<td></td>
</tr>
<tr>
<td>celulă</td>
<td>celulă</td>
<td>celulă</td>
</tr>
</table>
table {
width: 400px;
empty-cells: show;
}
td {
border: 1px solid black;
background-color: #f3f3f3;
text-align: center;
}
:
Exemplu . Valoarea hide
Iar acum celulele goale nu vor avea fundal și bordură:
<table>
<tr>
<td>celulă</td>
<td></td>
<td>celulă</td>
</tr>
<tr>
<td></td>
<td>celulă</td>
<td></td>
</tr>
<tr>
<td>celulă</td>
<td>celulă</td>
<td>celulă</td>
</tr>
</table>
table {
width: 400px;
empty-cells: hide;
}
td {
border: 1px solid black;
background-color: #f3f3f3;
text-align: center;
}
:
Vedeți și
-
pseudoclassa
empty,
care stabilește cum va arăta un element gol