CSS empty-cells-Eigenschaft

Die empty-cells-Eigenschaft steuert, ob Ränder und Hintergründe in einer Tabelle für leere Zellen angezeigt oder ausgeblendet werden. Beachten Sie, dass Zellen, die nur Leerzeichen enthalten, von dieser Eigenschaft nicht als leer betrachtet werden.

Diese Eigenschaft gilt für Tabellen, die eine border-collapse-Eigenschaft mit dem Wert „separate“ haben.

Der Standardwert für die empty-cells-Eigenschaft ist show.

Anfangswert	show
Gilt für	table-cell-Elemente
Vererbt	Nein.
Animierbar	Nein
Version	CSS2
DOM-Syntax	object.style.emptyCells = "hide";

Syntax

Syntax der CSS empty-cells-Eigenschaft

css

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

Beispiel für die empty-cells-Eigenschaft:

Beispiel für die CSS empty-cells-Eigenschaft mit den Werten show und hide

html

<!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>

Try it Yourself »

Die empty-cells-Eigenschaft steuert, ob Ränder und Hintergründe auf leeren Tabellenzellen gerendert werden. Sie können sie verwenden, wenn eine Tabelle leere Zellen enthalten könnte, sodass Sie diese für ein übersichtlicheres Layout ausblenden können. Dies ist besonders nützlich für Präsentations tabellen, bei denen leere Zellen ansonsten das visuelle Design stören würden.

Beispiel mit den Werten `hide` und `show`:

Beispiel für die CSS empty-cells-Eigenschaft mit den Werten hide und show

html

<!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>

Try it Yourself »

Ergebnis

CSS empty-cells Property with both values

Werte

Wert	Beschreibung	Ausführen
show	Bedeutet, dass Ränder und Hintergrund auf leeren Zellen angezeigt werden. Dies ist der Standardwert dieser Eigenschaft.	Ausführen »
hide	Bedeutet, dass Ränder und Hintergrund auf leeren Zellen nicht angezeigt werden.	Ausführen »
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.	Ausführen »
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Praxis

Was ist die Funktion der 'empty-cells'-Eigenschaft in CSS?

Sie legt fest, ob Ränder und Hintergrund auf leeren Zellen in Tabellen angewendet werden.Sie legt die Farbe von leeren Zellen in Tabellen fest.Sie definiert den Abstand zwischen Zellen in Tabellen.Sie wird verwendet, um leere Zellen in Tabellen auszublenden.

CSS empty-cells-Eigenschaft ​

Syntax ​

Beispiel für die empty-cells-Eigenschaft: ​

Beispiel mit den Werten hide und show: ​

Ergebnis ​

Werte ​