Свойство empty-cells

Свойството empty-cells указва на браузъра как да показва фона и границата на празни клетки td или клетки th на HTML таблица: да ги показва или не.

Една клетка се счита за празна в следните случаи: няма никакви символи, в клетката се съдържа само интервал (един или няколко), нов ред или табулация, или свойството visibility е зададено като hidden.

За да направите клетката непразна, но в същото време без видим текст, се използва следният прием: в клетката се записва неразделяем интервал  .

Свойството не работи, ако е зададен border-collapse със стойност collapse.

Синтаксис

cssселектор {
  empty-cells: show | hide;
}

Стойности

Стойност по подразбиране: show.

Пример . Стойност show

В момента в таблицата някои клетки са празни, но те все пак имат граница и фон:

html<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>

csstable {
  width: 400px;
  empty-cells: show;
}
td {
  border: 1px solid black;
  background-color: #f3f3f3;
  text-align: center;
}

Результат:

Пример . Стойност hide

А сега празните клетки няма да имат фон и граница:

html<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>

csstable {
  width: 400px;
  empty-cells: hide;
}
td {
  border: 1px solid black;
  background-color: #f3f3f3;
  text-align: center;
}

Результат:

Вижте също