Својството empty-cells

Својството empty-cells му укажува на прелистувачот како да ги прикажува позадината и границата на празните ќелии td или ќелии th на HTML табелата: дали да ги прикажува или не.

Ќелијата се смета за празна во следниве случаи: нема никакви знаци, во ќелијата содржи само празно место (едно или повеќе), превод на ред или табулатор, или својството visibility е поставено како hidden.

За да се направи ќелијата не празна, но во исто време без видлив текст, се користи следниов прием: во ќелијата се запишува нераздвојно празно место  .

Својството не функционира, ако е зададено border-collapse во вредност collapse.

Синтакса

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

Вредности

Стандардна вредност: show.

Пример . Вредност show

Моментално во табелата некои ќелии се празни, но тие сепак имаат граница и позадина:

html<table>
  <tr>
    <td>cell</td>
    <td></td>
    <td>cell</td>
  </tr>
  <tr>
    <td></td>
    <td>cell</td>
    <td></td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</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>cell</td>
    <td></td>
    <td>cell</td>
  </tr>
  <tr>
    <td></td>
    <td>cell</td>
    <td></td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

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

Результат:

Погледнете ги исто така