Vlastnosť empty-cells

Vlastnosť empty-cells určuje prehliadaču, ako zobrazovať pozadie a ohraničenie prázdnych buniek td alebo buniek th HTML tabuľky: zobrazovať alebo nie.

Bunka sa považuje za prázdnu v nasledujúcich prípadoch: nie sú v nej žiadne znaky, bunka obsahuje iba medzeru (jednu alebo viac), znak konca riadka alebo tabulátor, alebo ak je vlastnosť visibility nastavená na hidden.

Ak chceme, aby bunka nebola prázdna, ale zároveň bez viditeľného textu, používa sa nasledujúci trik: do bunky sa vloží nezlomitelná medzera  .

Vlastnosť nefunguje, ak je nastavená vlastnosť border-collapse na hodnotu collapse.

Syntax

cssselektor {
  empty-cells: show | hide;
}

Hodnoty

Predvolená hodnota: show.

Príklad . Hodnota show

Teraz má tabuľka niektoré bunky prázdne, ale aj tak majú ohraničenie a pozadie:

html<table>
  <tr>
    <td>bunka</td>
    <td></td>
    <td>bunka</td>
  </tr>
  <tr>
    <td></td>
    <td>bunka</td>
    <td></td>
  </tr>
  <tr>
    <td>bunka</td>
    <td>bunka</td>
    <td>bunka</td>
  </tr>
</table>

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

Результат:

Príklad . Hodnota hide

A teraz prázdne bunky nebudú mať pozadie a ohraničenie:

html<table>
  <tr>
    <td>bunka</td>
    <td></td>
    <td>bunka</td>
  </tr>
  <tr>
    <td></td>
    <td>bunka</td>
    <td></td>
  </tr>
  <tr>
    <td>bunka</td>
    <td>bunka</td>
    <td>bunka</td>
  </tr>
</table>

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

Результат:

Pozri tiež