Eigenschaft empty-cells

Die Eigenschaft empty-cells weist den Browser an, wie der Hintergrund und der Rand leerer Zellen td oder Zellen th einer HTML-Tabelle angezeigt werden sollen: ob sie angezeigt werden oder nicht.

Eine Zelle wird in den folgenden Fällen als leer betrachtet: Es sind überhaupt keine Zeichen vorhanden, die Zelle enthält nur Leerzeichen (eines oder mehrere), Zeilenumbrüche oder Tabulatorzeichen, oder die Eigenschaft visibility ist auf hidden gesetzt.

Um eine Zelle als nicht leer zu kennzeichnen, aber dennoch ohne sichtbaren Text, wird der folgende Trick verwendet: In die Zelle wird ein geschütztes Leerzeichen   geschrieben.

Die Eigenschaft funktioniert nicht, wenn border-collapse auf den Wert collapse gesetzt ist.

Syntax

cssSelektor {
  empty-cells: show | hide;
}

Werte

Standardwert: show.

Beispiel . Wert show

Derzeit sind in der Tabelle einige Zellen leer, aber sie haben dennoch einen Rand und einen Hintergrund:

html<table>
  <tr>
    <td>Zelle</td>
    <td></td>
    <td>Zelle</td>
  </tr>
  <tr>
    <td></td>
    <td>Zelle</td>
    <td></td>
  </tr>
  <tr>
    <td>Zelle</td>
    <td>Zelle</td>
    <td>Zelle</td>
  </tr>
</table>

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

Результат:

Beispiel . Wert hide

Jetzt haben leere Zellen weder Hintergrund noch Rand:

html<table>
  <tr>
    <td>Zelle</td>
    <td></td>
    <td>Zelle</td>
  </tr>
  <tr>
    <td></td>
    <td>Zelle</td>
    <td></td>
  </tr>
  <tr>
    <td>Zelle</td>
    <td>Zelle</td>
    <td>Zelle</td>
  </tr>
</table>

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

Результат:

Siehe auch