CSS-Eigenschaft empty-cells

Die Eigenschaft empty-cells definiert, ob die Ränder und der Hintergrund der Anzeige auf leeren Zellen in einer Tabelle angezeigt werden sollen oder nicht.

Diese Eigenschaft gilt für Tabellen, die den Wert "separate" der Eigenschaft border-collapse haben.

Für die Eigenschaft border-collapse ist der Standardwert "show".

Anfangswert show
Gilt für Table-Cell-Eelemente
Geerbt Ja
Animierbar Nein
Version CSS2
DOM Syntax object.style.emptyCells = "hide";

Syntax

empty-cells: show | hide | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .show {
      empty-cells: show;
      }
      .hide {
      empty-cells: hide;
      }
      td, th {
      border: 1px solid #1c87c9;
      padding: 0.5rem;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft empty-cells</h2>
    <p>Hier wird der Wert "show" verwendet: </p>
    <table class="show">
      <tr>
        <td>Moe</td>
        <td>Larry</td>
      </tr>
      <tr>
        <td>Curly</td>
        <td></td>
      </tr>
    </table>
    <br>
    <p>In der Tabelle wird der Wert "hide" verwendet:</p>
    <table class="hide">
      <tr>
        <td>Moe</td>
        <td>Larry</td>
      </tr>
      <tr>
        <td>Curly</td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

Ein weiteres Beispiel mit den Werten "hide" und "show":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .show {
      empty-cells: show;
      }
      .hide {
      empty-cells: hide;
      }
      body {
      background: #1c87c9;
      padding: 25px 0;
      color: #fff;
      font-size: 2em;
      text-align: center;
      }
      table {
      display: flex;
      justify-content: center;
      }
      td {
      background: #fff;
      border: 1px solid #8ebf42;
      padding: 10px 15px;
      color: green;
      }
    </style>
  </head>
  <body>
    <p>Die leeren Zellen werden angezeigt.</p>
    <table class="show">
      <tbody>
        <tr>
          <td>&diams;</td>
          <td></td>
          <td>&diams;</td>
          <td>&diams;</td>
        </tr>
      </tbody>
    </table>
    <p>Die leeren Zellen werden ausgeblendet.</p>
    <table class="hide">
      <tbody>
        <tr>
          <td>&diams;</td>
          <td></td>
          <td>&diams;</td>
          <td>&diams;</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Werte

Wert Beschreibung
show Die Grenzen und der Hintergrund der leeren Zellen werden angezeigt. Das ist der Standardwert dieser Eigenschaft.
hide Die Grenzen und der Hintergrund von leeren Zellen werden nicht angezeigt.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.2+ 4.0+

Übe dein Wissen

Welche Werte kann die CSS-Eigenschaft 'empty-cells' annehmen?
Finden Sie das nützlich?