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

CSS-Eigenschaft: border-collapse, Kategorien: Rahmen (allgemein), Tabellen (allgemein), Tables (CSS 2.1)

Rahmendarstellung in Tabellen

Bestimmt, ob Tabellenzellen innerhalb einer Tabelle jeweils einen eigenen Rahmen bekommen oder ob die Zellen sich den Rahmen mit den daneben stehenden Zellen teilen.

CSS-Eigenschaft: border-collapse
KurzbeschreibungWerteStandardwertKategorieHinweis
Rahmendarstellung in Tabellen
  • collapse
  • separate
  • inherit
separate
Allgemein:
Rahmen
Tabellen
CSS 2.1:
Tables
 

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

Folgendes ist beim Einsatz von border-collapse zu beachten:

  • border-collapse hat zwei mögliche Werte. Beim Standardwert separate hat jede Tabellenzelle einen eigenen Rahmen, auch unabhängig vom Rahmen der Tabelle selber. Beim Wert collapse fallen ("kollabieren") Tabelle und Zellen zusammen, der Rahmen einer Zelle ist gleichzeitig der Rahmen der Nachbarzelle, der per Default vorhandene Zwischenraum zwischen zwei Zellen ist nicht mehr vorhanden.
  • Die Größe des Zellabstandes beim Wert separate ist dabei unabhängig von einer Rahmenstärke und ist auch über border-collapse nicht zu beeinflussen. Zellenabstände werden über border-spacing definiert.
  • border-collapse muss dabei dem <table>-Tag zugewiesen werden. Eine Zuweisung an eine <th> oder <td> ist ohne Effekt. Die Eigenschaft wirkt auf die komplette Tabelle. Es ist beispielsweise nicht möglich, die Tabellenzellen nach links und rechts "kollabieren" zu lassen und den Zwischenabstand von oben und unten zu erhalten.
  • Solange sich Rahmen separat sind, ist die Verteilung der Rahmenfarbe (und weiterer Rahmeneigenschaften) nachvollziehbar. Die Darstellung der Rahmenfarbe ist browserabhängig unterschiedlich, wenn die Rahmen "kollabiert" sind. Im Beispiel Nr. 3 wird deutlich, welche Rahmendefinition verwendet wird. Werden den Zellen vier Farbparameter (für [oben|rechs|unten|links], siehe auch border-color) zugewiesen, wird die Angabe der Zellen für rechts und unten verwendet, mit Ausnahme des Opera, der verhält sich gegenteilig und stellt die Farben für oben uns links dar. Der Tabellenrahmen selber bleibt in dieser Einstellung von den Zellrahmenfarben unberührt.
  • Eine vollständige Angabe von beispielsweise border-top einschließlich Breiten- und Farbangabe verändert dieses Verhalten, sie erhält eine höhere Priorität und auch der Rahmen der Tabelle selber wird nach Angabe der <td> dargestellt.
  • Browserabhängig ist ebenfalls die Darstellung der Rahmenecken, an denen die unterschiedlichen Rahmen aufeinanderstoßen, sehr unterschiedlich. Zum Teil werden die Schnittkanten diagonal dargestellt, zum Teil zieht sich der Zellenrahmen bis zum Ende der Tabelle durch und bildet senkrechte Schnittkanten. Im Beispiel Nr. 4 und bei Betrachtung in unterschiedlichen Browsern wird deutlich, was mit dieser umständlichen Erklärung gemeint ist.
  • Im Detail ist das Verhalten sehr unterschiedlich, grundsätzlich ist die Kombination von verschiedenen Zellenrahmenfarben und -styles in der Praxis selten bzw. so gut wie gar nicht zu finden, von daher sind das hier eher theoretische Betrachtungen.
Browserunterstützung von border-collapse
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 border-collapse:



Beispiele

HTML:

<table>
   <tr>
      <td>1 1</td>
      <td>1 2</td>
      <td>1 3</td>
   </tr>
   <tr>
      <td>2 1</td>
      <td>2 2</td>
      <td>2 3</td>
   </tr>
   <tr>
      <td>3 1</td>
      <td>3 2</td>
      <td>3 3</td>
   </tr>
</table>

CSS:

table {
   border: 10px solid blue;
}
td {
   border: 4px solid red;
   padding: 25px;
}
/* Standarddarstellung. Die Tabelle selber hat einen Rahmen, jede Zelle selber ebenfalls. */

Beispiel Nr. 1 So sieht's aus:

1 1 1 2 1 3
2 1 2 2 2 3
3 1 3 2 3 3
 

HTML:

<table class="doCollapse">
   <tr>
      <td>1 1</td>
      <td>1 2</td>
      <td>1 3</td>
   </tr>
   <tr>
      <td>2 1</td>
      <td>2 2</td>
      <td>2 3</td>
   </tr>
   <tr>
      <td>3 1</td>
      <td>3 2</td>
      <td>3 3</td>
   </tr>
</table>

CSS:

.doCollapse {
   border-collapse: collapse;
}
/* Über collapse "kollabieren" die Zellen, der Zellenrahmen ist gleichzeitig Rahmen der benachbarten Zelle. */

Beispiel Nr. 2 So sieht's aus:

1 1 1 2 1 3
2 1 2 2 2 3
3 1 3 2 3 3
 

HTML:

<table class="doCollapse doColors">
   <tr>
      <td>1 1</td>
      <td>1 2</td>
      <td>1 3</td>
   </tr>
   <tr>
      <td>2 1</td>
      <td>2 2</td>
      <td>2 3</td>
   </tr>
   <tr>
      <td>3 1</td>
      <td>3 2</td>
      <td>3 3</td>
   </tr>
</table>

CSS:

.doColors {
   border-color: black;
}
.doColors td {
   border-color: blue red yellow green;
}
/* Eigentlich ist für jede Zellenrahmenseite eine eigene Farbe zugewiesen.
Teilen sich die Zellen den Rahmen, werden die Angaben für rechts und unten dargestellt, mit Ausnahmen von Opera, der stellt die Farben für oben und links dar.
Die Farbe der Tabelle selber bleibt davon unberührt. */

Beispiel Nr. 3 So sieht's aus:

1 1 1 2 1 3
2 1 2 2 2 3
3 1 3 2 3 3
 

HTML:

<table class="doCollapse doColors doSpecial">
   <tr>
      <td>1 1</td>
      <td>1 2</td>
      <td>1 3</td>
   </tr>
   <tr>
      <td>2 1</td>
      <td>2 2</td>
      <td>2 3</td>
   </tr>
   <tr>
      <td>3 1</td>
      <td>3 2</td>
      <td>3 3</td>
   </tr>
</table>

CSS:

.doSpecial td {
   border-top: fuchsia 10px double;
}
/* Eine vollständige Angabe einer Zellen-border-Eigenschaft betrifft dann auch die Rahmendarstellung der Tabelle selber.
Sehr unterschiedlich und browserabhängig ist die Darstellung der Schnittstellen der Rahmen. */

Beispiel Nr. 4 So sieht's aus:

1 1 1 2 1 3
2 1 2 2 2 3
3 1 3 2 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: 22. 08. 2020
Render Time: 0.375 sec.