Свойство empty-cells
Свойството empty-cells указва на браузъра
как да показва фона и границата на празни клетки
td или клетки
th на HTML таблица:
да ги показва или не.
Една клетка се счита за празна в следните случаи:
няма никакви символи, в клетката се съдържа
само интервал (един или няколко), нов ред
или табулация, или свойството
visibility
е зададено като hidden.
За да направите клетката непразна, но в същото време
без видим текст, се използва следният
прием: в клетката се записва неразделяем интервал
.
Свойството не работи, ако е зададен border-collapse
със стойност collapse.
Синтаксис
селектор {
empty-cells: show | hide;
}
Стойности
| Стойност | Описание |
|---|---|
show |
Фон и граница се показват при празна клетка. |
hide |
Фон и граница не се показват при празна клетка. |
Стойност по подразбиране: show.
Пример . Стойност show
В момента в таблицата някои клетки са празни, но те все пак имат граница и фон:
<table>
<tr>
<td>клетка</td>
<td></td>
<td>клетка</td>
</tr>
<tr>
<td></td>
<td>клетка</td>
<td></td>
</tr>
<tr>
<td>клетка</td>
<td>клетка</td>
<td>клетка</td>
</tr>
</table>
table {
width: 400px;
empty-cells: show;
}
td {
border: 1px solid black;
background-color: #f3f3f3;
text-align: center;
}
:
Пример . Стойност hide
А сега празните клетки няма да имат фон и граница:
<table>
<tr>
<td>клетка</td>
<td></td>
<td>клетка</td>
</tr>
<tr>
<td></td>
<td>клетка</td>
<td></td>
</tr>
<tr>
<td>клетка</td>
<td>клетка</td>
<td>клетка</td>
</tr>
</table>
table {
width: 400px;
empty-cells: hide;
}
td {
border: 1px solid black;
background-color: #f3f3f3;
text-align: center;
}
:
Вижте също
-
псевдоклас
empty,
който задава как ще изглежда празен елемент