Savybė empty-cells

Savybė empty-cells nurodo naršyklei kaip atvaizduoti foną ir rėmelį tuščių ląstelių td arba ląstelių th HTML lentelės: rodyti arba nerodyti.

Ląstelė laikoma tuščia šiais atvejais: nėra jokių simbolių, ląstelėje yra tik tarpas (vienas ar keli), eilutės pertrauka ar tabuliacijos simbolis, arba savybė visibility nustatyta kaip hidden.

Kad ląstelė nebūtų tuščia, bet kartu be matomo teksto, naudojamas toks būdas: į ląstelę įrašomas nepertraukiamas tarpas  .

Savybė neveikia, jei nustatytas border-collapse reikšmėje collapse.

Sintaksė

cssselektorius {
  empty-cells: show | hide;
}

Reikšmės

Numatytoji reikšmė: show.

Pavyzdys . Reikšmė show

Dabar lentelėje kai kurios ląstelės yra tuščios, bet vis tiek turi rėmelį ir foną:

html<table>
  <tr>
    <td>ląstelė</td>
    <td></td>
    <td>ląstelė</td>
  </tr>
  <tr>
    <td></td>
    <td>ląstelė</td>
    <td></td>
  </tr>
  <tr>
    <td>ląstelė</td>
    <td>ląstelė</td>
    <td>ląstelė</td>
  </tr>
</table>

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

Результат:

Pavyzdys . Reikšmė hide

O dabar tuščios ląstelės neturės fono ir rėmelio:

html<table>
  <tr>
    <td>ląstelė</td>
    <td></td>
    <td>ląstelė</td>
  </tr>
  <tr>
    <td></td>
    <td>ląstelė</td>
    <td></td>
  </tr>
  <tr>
    <td>ląstelė</td>
    <td>ląstelė</td>
    <td>ląstelė</td>
  </tr>
</table>

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

Результат:

Taip pat žiūrėkite