W3docs
de
Anmelden

CSS empty-cells Eigenschaft

Die CSS-Eigenschaft empty-cells legt fest, ob Rahmen und Hintergrund angezeigt werden. Sehen Sie die Werte und probieren Sie Beispiele aus.

Die Eigenschaft empty-cells steuert, ob Rahmen und Hintergrund für leere Zellen einer Tabelle gezeichnet werden. Eine leere Zelle ist ein <td> oder <th> ohne jeglichen Inhalt. Eine Zelle, die nur Leerzeichen enthält (ein Leerzeichen, ein &nbsp; oder einen Zeilenumbruch), gilt als nicht leer, sodass die Eigenschaft darauf keine Wirkung hat.

Diese Seite erklärt, was empty-cells bewirkt, wann es tatsächlich wirksam ist, welche Werte es akzeptiert und welche Fallstricke es zu beachten gilt.

Wann die Eigenschaft gilt

empty-cells hat nur dann eine sichtbare Wirkung, wenn die Zellenrahmen getrennt sind — das heißt, wenn die Tabelle border-collapse: separate verwendet (der Standardwert). Bei border-collapse: collapse teilen sich benachbarte Zellen einen gemeinsamen Rahmen, sodass es keinen separaten Rahmen oder Hintergrund für eine leere Zelle gibt, der ausgeblendet werden könnte — die Eigenschaft wird ignoriert.

Da die Standardwerte bereits border-collapse: separate und empty-cells: show sind, werden leere Zellen standardmäßig angezeigt, und Sie benötigen diese Eigenschaft nur, um sie auszublenden.

Anfangswertshow
Gilt fürtable-cell-Elemente
VererbbarNein
AnimierbarNein
VersionCSS2
DOM-Syntaxobject.style.emptyCells = "hide";

Syntax

Syntax der CSS-Eigenschaft empty-cells

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

Beispiel der empty-cells-Eigenschaft:

Beispiel der CSS-Eigenschaft empty-cells mit den Werten show und hide

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .show {
        empty-cells: show;
      }
      .hide {
        empty-cells: hide;
      }
      td,
      th {
        border: 1px solid #1c87c9;
        padding: 0.5rem;
      }
      table {
        border-collapse: separate;
      }
    </style>
  </head>
  <body>
    <h2>Empty-cells property example</h2>
    <p>Here the "show" value is used: </p>
    <table class="show">
      <tr>
        <td>Moe</td>
        <td>Larry</td>
      </tr>
      <tr>
        <td>Curly</td>
        <td></td>
      </tr>
    </table>
    <br />
    <p>In this table the "hide" value is used:</p>
    <table class="hide">
      <tr>
        <td>Moe</td>
        <td>Larry</td>
      </tr>
      <tr>
        <td>Curly</td>
        <td></td>
      </tr>
    </table>
  </body>
</html>
Probier es selbst »

In der ersten Tabelle behält die leere Zelle unten rechts ihren Rahmen. In der zweiten entfernt empty-cells: hide den Rahmen und Hintergrund dieser Zelle vollständig, sodass der Bereich leer wirkt. Verwenden Sie hide, wenn eine Tabelle Lücken enthalten kann und Sie ein saubereres Erscheinungsbild wünschen — zum Beispiel bei einem Zeitplan oder einem Preisraster, bei dem nicht jede Stelle ausgefüllt ist.

Beispiel mit farbigem Hintergrund:

Beispiel der CSS-Eigenschaft empty-cells mit den Werten hide und show

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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 {
        border-collapse: separate;
      }
      td {
        background: #fff;
        border: 1px solid #8ebf42;
        padding: 10px 15px;
        color: green;
      }
    </style>
  </head>
  <body>
    <p>The empty cells are shown</p>
    <table class="show">
      <tbody>
        <tr>
          <td>&diams;</td>
          <td></td>
          <td>&diams;</td>
          <td>&diams;</td>
        </tr>
      </tbody>
    </table>
    <p>The empty cells are hidden</p>
    <table class="hide">
      <tbody>
        <tr>
          <td>&diams;</td>
          <td></td>
          <td>&diams;</td>
          <td>&diams;</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Probier es selbst »

Wenn hide angewendet wird, zeigt die leere Zelle weder ihren weißen Hintergrund noch ihren grünen Rahmen — sie geht im blauen Seitenhintergrund auf.

Ergebnis

CSS-Eigenschaft empty-cells mit beiden Werten

Werte

WertBeschreibungAusprobieren
showRahmen und Hintergrund leerer Zellen werden gezeichnet. Dies ist der Standardwert.Ausprobieren »
hideRahmen und Hintergrund leerer Zellen werden nicht gezeichnet, sodass leere Zellen leer erscheinen.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert zurück (show).Ausprobieren »
inheritErbt den Wert vom übergeordneten Element. Beachten Sie, dass empty-cells standardmäßig nicht vererbt wird.

Browser-Unterstützung

empty-cells ist Teil von CSS2 und wird in allen modernen Browsern unterstützt, darunter Chrome, Firefox, Safari, Edge und Opera. Vendor-Prefixe sind nicht erforderlich.

Hinweise und Fallstricke

  • Die Eigenschaft wird nicht vererbt. Setzen Sie sie auf das table-, tr-, td- oder th-Element, auf das sie angewendet werden soll (sie wirkt visuell kaskadierend, da Zellen sie aus ihrem eigenen berechneten Stil lesen — das Deklarieren auf dem table ist der übliche Ansatz).
  • Sie hat keine Wirkung bei border-collapse: collapse, da zusammengefasste Rahmen zwischen den Zellen geteilt werden.
  • Eine Zelle mit Leerzeichen, einem &nbsp; oder einem leeren <img>/Element gilt für diese Eigenschaft als nicht leer. Nur eine Zelle mit buchstäblich keinerlei Inhalt ist betroffen.
  • Um den Abstand zwischen getrennten Zellen zu steuern, kombinieren Sie diese Eigenschaft mit border-spacing.

Übung

Übung
Was ist die Funktion der Eigenschaft 'empty-cells' in CSS?
Was ist die Funktion der Eigenschaft 'empty-cells' in CSS?
Was this page helpful?