border-collapse

Die CSS Eigenschaft border-collapse bestimmt, ob die Zellen innerhalb einer Tabelle mite einem gemeinsamen oder getrennten Rahmen dargestellt werden.

Hinweis: Wenn der Wert auf collapsed gesetzt ist, so verhält sich der Wert inset für border-style wie der Wert groove und der Wert outset wie ridge.

Hinweis: When cells are separated, the distance between cells is defined by the border-spacing property.

Syntax

/* Keyword values */
border-collapse: collapse;
border-collapse: separate;

/* Global values */
border-collapse: inherit;
border-collapse: initial;
border-collapse: unset;

Die Eigenschaft border-collapse wird als ein einziges Schlüsselwort angegeben, das aus der folgenden Liste ausgewählt werden kann.

Werte

separate: Standardwert. Jede Zelle besitzt ihre eigenen Rahmen, deren Abstand mit border-spacing angegeben wird.
collapse: Benachbarte Zellen haben einen gemeinsame Rahmen.
inherit: Der Wert des Elternelements wird geerbt.

Formal definition

Initialwert	`separate`
Anwendbar auf	`table`- und `inline-table`-Elemente
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formal syntax

collapse | separate

Beispiele

A colorful table of browser engines

HTML

<table class="separate">
  <caption><code>border-collapse: separate</code></caption>
  <tbody>
    <tr><th>Browser</th> <th>Layout Engine</th></tr>
    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
  </tbody>
</table>
<table class="collapse">
  <caption><code>border-collapse: collapse</code></caption>
  <tbody>
    <tr><th>Browser</th> <th>Layout Engine</th></tr>
    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
  </tbody>
</table>

CSS

.collapse {
  border-collapse: collapse;
}

.separate {
  border-collapse: separate;
}

table {
  display: inline-table;
  margin: 1em;
  border: dashed 5px;
}

table th,
table td {
  border: solid 3px;
}

.fx { border-color: orange blue; }
.gk { border-color: black red; }
.ed { border-color: blue gold; }
.tr { border-color: aqua; }
.sa { border-color: silver blue; }
.wk { border-color: gold blue; }
.ch { border-color: red yellow green blue; }
.bk { border-color: navy blue teal aqua; }
.op { border-color: red; }

Ergebnis

Spezifikationen

Spezifikation	Status	Anmerkung
CSS Level 2 (Revision 1) Die Definition von 'border-collapse' in dieser Spezifikation.	Empfehlung	Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
`border-collapse`	Chrome Vollständige Unterstützung 1	Edge Vollständige Unterstützung 12	Firefox Vollständige Unterstützung 1	IE Vollständige Unterstützung 5	Opera Vollständige Unterstützung 4	Safari Vollständige Unterstützung 1.2	WebView Android Vollständige Unterstützung 2.3	Chrome Android Vollständige Unterstützung 18	Firefox Android Vollständige Unterstützung 4	Opera Android Vollständige Unterstützung 10.1	Safari iOS Vollständige Unterstützung 3	Samsung Internet Android Vollständige Unterstützung 1.0

Legende

Vollständige Unterstützung: Vollständige Unterstützung

Siehe auch

border-spacing, border-style, caption-side, empty-cells, table-layout