PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

CSS-Eigenschaft: empty-cells, Kategorien: Tabellen (allgemein), Tables (CSS 2.1)

Anzeige leerer Zellen

Bestimmt, ob leere Zellen angezeigt werden oder nicht.

CSS-Eigenschaft: empty-cells
KurzbeschreibungWerteStandardwertKategorieHinweis
Anzeige leerer Zellen
  • show
  • hide
  • inherit
show
Allgemein:
Tabellen
CSS 2.1:
Tables
 

Verwandte Eigenschaften aus der Kategorie: Tabellen (allgemein), Tables (CSS 2.1):

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
Browserunterstützung von empty-cells
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu empty-cells:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    elevation


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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 17. 01. 2024
Render Time: 0.158 sec.