Ominaisuus empty-cells

Ominaisuus empty-cells määrittää selaimelle, miten näyttää taustan ja reunuksen tyhjille soluille td tai soluille th HTML-taulukossa: näytetäänkö ne vai eivät.

Solu katsotaan tyhjäksi seuraavissa tapauksissa: ei ole lainkaan merkkejä, solu sisältää vain välilyönnin (yksi tai useampi), rivinvaihdon tai sarkainmerkin, tai ominaisuus visibility on asetettu arvoon hidden.

Tehdäkseen solusta ei-tyhjän, mutta samalla ilman näkyvää tekstiä, käytetään seuraavaa keinoa: soluun kirjoitetaan sitova välilyönti  .

Ominaisuus ei toimi, jos border-collapse on asetettu arvoon collapse.

Syntaksi

cssvalitsin {
  empty-cells: show | hide;
}

Arvot

Oletusarvo: show.

Esimerkki . Arvo show

Nyt taulukossa on joitain tyhjiä soluja, mutta niillä on silti reunus ja tausta:

html<table>
  <tr>
    <td>solu</td>
    <td></td>
    <td>solu</td>
  </tr>
  <tr>
    <td></td>
    <td>solu</td>
    <td></td>
  </tr>
  <tr>
    <td>solu</td>
    <td>solu</td>
    <td>solu</td>
  </tr>
</table>

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

Результат:

Esimerkki . Arvo hide

Mutta nyt tyhjillä soluilla ei ole taustaa ja reunusta:

html<table>
  <tr>
    <td>solu</td>
    <td></td>
    <td>solu</td>
  </tr>
  <tr>
    <td></td>
    <td>solu</td>
    <td></td>
  </tr>
  <tr>
    <td>solu</td>
    <td>solu</td>
    <td>solu</td>
  </tr>
</table>

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

Результат:

Katso myös