border-collapse

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die border-collapse CSS Eigenschaft legt fest, ob Zellen innerhalb eines <table> gemeinsame oder separate Ränder haben.

Probieren Sie es aus

border-collapse: collapse;

border-collapse: separate;

<section class="default-example" id="default-example"> <table class="transition-all" id="example-element"> <tr> <td>Cell 1.1</td> <td>Cell 1.2</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> </tr> </table> </section>

table { width: 15rem; table-layout: fixed; } td { border: 5px solid; border-color: crimson dodgerblue orange limegreen; padding: 0.75rem; }

Wenn Zellen zusammengeführt werden, verhält sich der border-style Wert inset wie ridge, und outset verhält sich wie groove.

Wenn Zellen getrennt sind, wird der Abstand zwischen den Zellen durch die Eigenschaft border-spacing definiert.

Syntax

css

/* Keyword values */ border-collapse: collapse; border-collapse: separate; /* Global values */ border-collapse: inherit; border-collapse: initial; border-collapse: revert; border-collapse: revert-layer; border-collapse: unset;

Die Eigenschaft border-collapse wird als ein einzelnes Schlüsselwort angegeben, das aus der unten aufgeführten Liste ausgewählt werden kann.

Werte

collapse: Angrenzende Zellen haben gemeinsame Ränder (das zusammengeführte-Rand-Tabellen-Rendermodell).
separate: Angrenzende Zellen haben unterschiedliche Ränder (das getrennte-Rand-Tabellen-Rendermodell).

Formale Definition

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

Formale Syntax

border-collapse = 
 separate |
 collapse

Beispiele

Eine farbenfrohe Tabelle von Browser-Engines

HTML

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

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

Specification
Cascading Style Sheets Level 2 # propdef-border-collapse

Browser-Kompatibilität

Siehe auch

border-spacing, border-style
Die Eigenschaft border-collapse ändert das Erscheinungsbild des HTML-Elements <table>.
CSS table Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden