Ostatnio edytowany:

empty-cells

Autor: Virtual Patriot

Opis właściwości empty-cells

Za pomocą właściwości empty-cells możemy określić czy ewentualne widoczne obramowanie oraz tło pustych komórek (elementów td, elementów th) interesującej nas tabeli HTML powinno zostać ukryte.

Dodatkowe techniczne informacje o właściwości empty-cells

przeznaczenie

element HTML typu table-cell

dziedziczenie

tak

wartość initial

show

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości empty-cells

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości empty-cells

show

Opis

Wartość show jest domyślną wartością właściwości empty-cells.

Domyślnie ewentualne widoczne obramowanie oraz tło pustych komórek tabeli HTML nie jest ukryte.

Przykład

  empty-cells:show;
Przykładowa Tabela HTML
komórka - 1komórka - 2komórka - 3
komórka - 4komórka - 6

Tło oraz obramowanie pustych elementów "td" oraz pustych elementów "th" przykładowego elementu "table" nie jest ukryte.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      table {
        border:3px solid black;
        background-color:#CBFFFF;
      }

      table > caption {
        padding:1em;
        background-color:#CCC;
      }

      table > tbody > tr > th {
        border:1px solid black;
        padding:1em;
        background-color:white;
      }

      table > tbody > tr > td {
        border:1px solid black;
        padding:1em;
        background-color:white;
      }
    </style>
  </head>

  <body>

    <table>
      <caption>Przykładowa Tabela HTML</caption>
      <tbody>
        <tr>
          <th>komórka - 1</th>
          <td>komórka - 2</td>
          <td>komórka - 3</td>
        </tr>

        <tr>
          <th>komórka - 4</th>
          <td></td>
          <td>komórka - 6</td>
        </tr>

        <tr>
          <th></th>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

hide

Opis

Za pomocą wartości hide właściwości empty-cells możemy sprawić, że ewentualne widoczne obramowanie oraz tło pustych komórek interesującej nas tabeli HTML zostanie ukryte.

Wartość "hide" właściwości "empty-cells" przeznaczona jest dla komórek tabeli HTML, której właściwość border-collapse posiada wartość różną od wartości collapse.

Przykład

  empty-cells:hide;
Przykładowa Tabela HTML
komórka - 1komórka - 2komórka - 3
komórka - 4komórka - 6

Tło oraz obramowanie pustych elementów "td" oraz pustych elementów "th" przykładowego elementu "table" zostało ukryte, ponieważ do wspomnianego elementu "table" została dodana właściwość "empty-cells" wraz z wartością "hide".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      table {
        empty-cells:hide;
        border:3px solid black;
        background-color:#CBFFFF;
      }

      table > caption {
        padding:1em;
        background-color:#CCC;
      }

      table > tbody > tr > th {
        border:1px solid black;
        padding:1em;
        background-color:white;
      }

      table > tbody > tr > td {
        border:1px solid black;
        padding:1em;
        background-color:white;
      }
    </style>
  </head>

  <body>

    <table>
      <caption>Przykładowa Tabela HTML</caption>
      <tbody>
        <tr>
          <th>komórka - 1</th>
          <td>komórka - 2</td>
          <td>komórka - 3</td>
        </tr>

        <tr>
          <th>komórka - 4</th>
          <td></td>
          <td>komórka - 6</td>
        </tr>

        <tr>
          <th></th>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>

  </body>
</html>