Пустая ячейка

В каскадных таблицах стилей есть такое интересное свойство, как empty-cells которое задает отображение границ и фона в ячейке, если в ней нет видимого содержания.
Стоит отметить, что если к таблице применено свойство border-collapse
со значением collapse
, свойство empty-cells
не работает.
empty-cells : show;
empty-cells : hide;
show
– параметр отображения границы и фона.
hide
– параметр скрывающий ячейку.
Ниже приведён пример использования свойства empty-cells в котором имеется незаполненная ячейка <td></td>
.
Если между тегами ячейки ставится пробел <td> </td>
, то ячейка не будет считаться пустой.

HTML
<table class="empty-cells-table">
<tr>
<td>Наименование</td>
<td>Количество</td>
<td>Цена</td>
</tr>
<tr>
<td>Деталь 001</td>
<td>200шт.</td>
<td>50р.</td>
</tr>
<tr>
<td>Деталь 002</td>
<td>1500шт.</td>
<td> </td>
</tr>
<tr>
<td>Деталь 003</td>
<td></td>
<td>245р.</td>
</tr>
<tr>
<td>Деталь 004</td>
<td>1000шт.</td>
<td> </td>
</tr>
</table>
CSS
.empty-cells-table {
color: #281000;
font-size: 22px;
margin : 20px auto;
}
.empty-cells-table td {
empty-cells: hide;
border: 1px solid #fff;
background-color: #e3d78e;
padding: 6px 12px 5px 12px;
}