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

Empty cells

В каскадных таблицах стилей есть такое интересное свойство, как empty-cells которое задает отображение границ и фона в ячейке, если в ней нет видимого содержания.

Стоит отметить, что если к таблице применено свойство border-collapse со значением collapse, свойство empty-cells не работает.


empty-cells : show;
empty-cells : hide;

show – параметр отображения границы и фона.

hide – параметр скрывающий ячейку.

Ниже приведён пример использования свойства empty-cells в котором имеется незаполненная ячейка <td></td>.

Если между тегами ячейки ставится пробел <td>&nbsp;</td>, то ячейка не будет считаться пустой.

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

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>&nbsp;</td>
  </tr>
  <tr>
    <td>Деталь 003</td>
    <td></td>
    <td>245р.</td>
  </tr>
  <tr>
    <td>Деталь 004</td>
    <td>1000шт.</td>
    <td>&nbsp;</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;
}