CSS-Eigenschaft: empty-cells, Kategorien: Tabellen (allgemein), Tables (CSS 2.1)
Anzeige leerer Zellen
Bestimmt, ob leere Zellen angezeigt werden oder nicht.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Anzeige leerer Zellen |
| show |
Verwandte Eigenschaften aus der Kategorie: Tabellen (allgemein), Tables (CSS 2.1):
- border-collapse
- border-spacing
- caption-side
- Aktuelle Seite: empty-cells
- table-layout
- vertical-align
Folgendes ist beim Einsatz von empty-cells zu beachten:
- Die Eigenschaft empty-cells kann sowohl an den TABLE-Tag als auch an das TH bzw. TD-Tag gebunden werden.
- Auch wenn der Zelle Eigenschaften zugewiesen sind, wie Rahmenfarbe, -stil und -stärke oder auch eine Hintergrundfarbe, wird die Zelle nicht dargestellt, wenn empty-cells: hide gesetzt ist.
- Die Eigenschaft selber ist aber abhängig davon, dass die Tabelle selber die Eigenschaft border-collapse: separate hat. Wird die Rahmendarstellung auf collapse gesetzt, ist empty-cells außer Kraft gesetzt, wie unten im Beispiel Nr. 4 zu sehen ist, werden dann trotzdem leere Zellen angezeigt.
- Diese Eigenschaft wird von allen aktuellen Browsern zuverlässig umgesetzt. Ausnahmen zeigt hier der Internet Explorer unter der 8er Version
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu empty-cells:
- W3C Spezifikation:
http://www.w3.org/TR/CSS21/tables.html#propdef-empty-cells
Beispiele
HTML:
<table>
<tr>
<td>1 1</td>
<td>1 2</td>
<td> </td>
</tr>
<tr>
<td>2 1</td>
<td>2 2</td>
<td>2 3</td>
</tr>
<tr>
<td>3 1</td>
<td> </td>
<td>3 3</td>
</tr>
</table>CSS:
/* Standarddarstellung */Beispiel Nr. 1 So sieht's aus:
| 1 1 | 1 2 | |
| 2 1 | 2 2 | 2 3 |
| 3 1 | 3 3 |
HTML:
<table class="doHideEmpty">
<tr>
<th>th 1</th>
<th></th>
<th>th 3</th>
</tr>
<tr>
<td>1 1</td>
<td>1 2</td>
<td> </td>
</tr>
<tr>
<td>2 1</td>
<td>2 2</td>
<td>2 3</td>
</tr>
<tr>
<td>3 1</td>
<td> </td>
<td>3 3</td>
</tr>
</table>CSS:
table {
border: 5px solid blue;
}
th,
td {
border: 2px solid #880000;
background-color: #FFFF5D;
padding: 10px;
}
table.doHideEmpty {
empty-cells: hide;
}Beispiel Nr. 2 So sieht's aus:
| th 1 | th 3 | |
|---|---|---|
| 1 1 | 1 2 | |
| 2 1 | 2 2 | 2 3 |
| 3 1 | 3 3 |
HTML:
<table>
<tr>
<td>1 1</td>
<td>1 2</td>
<td> </td>
</tr>
<tr>
<td>2 1</td>
<td>2 2</td>
<td>2 3</td>
</tr>
<tr>
<td class="doHideSingle">3 1</td>
<td class="doHideSingle"> </td>
<td class="doHideSingle">3 3</td>
</tr>
</table>CSS:
td.doHideSingle {
empty-cells: hide;
}Beispiel Nr. 3 So sieht's aus:
| 1 1 | 1 2 | |
| 2 1 | 2 2 | 2 3 |
| 3 1 | 3 3 |
HTML:
<table class="doCollapse">
<tr>
<td>1 1</td>
<td>1 2</td>
<td> </td>
</tr>
<tr>
<td>2 1</td>
<td>2 2</td>
<td>2 3</td>
</tr>
<tr>
<td>3 1</td>
<td> </td>
<td>3 3</td>
</tr>
</table>CSS:
.doCollapse {
border-collapse: collapse;
empty-cells: hide;
}Beispiel Nr. 4 So sieht's aus:
| 1 1 | 1 2 | |
| 2 1 | 2 2 | 2 3 |
| 3 1 | 3 3 |
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!