1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: border-collapse
slug: Web/CSS/border-collapse
tags:
- CSS
- CSS Border
- CSS Rahmen
- CSS Referenz
- CSS Table
- Referenz
translation_of: Web/CSS/border-collapse
---
<p>{{CSSRef}}</p>
<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <code>border-collapse</code> bestimmt, ob die Zellen innerhalb einer Tabelle mite einem gemeinsamen oder getrennten Rahmen dargestellt werden.</p>
<div>{{EmbedInteractiveExample("pages/css/border-collapse.html")}}</div>
<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p>
<div class="note"><strong>Hinweis:</strong> Wenn der Wert auf collapsed gesetzt ist, so verhält sich der Wert <code>inset</code> für {{cssxref("border-style")}} wie der Wert <code>groove</code> und der Wert <code>outset</code> wie <code>ridge</code>.</div>
<div class="note"><strong>Hinweis:</strong> When cells are separated, the distance between cells is defined by the {{cssxref("border-spacing")}} property.</div>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: css no-line-numbers notranslate">/* Keyword values */
border-collapse: collapse;
border-collapse: separate;
/* Global values */
border-collapse: inherit;
border-collapse: initial;
border-collapse: unset;
</pre>
<p>Die Eigenschaft <code>border-collapse</code> wird als ein einziges Schlüsselwort angegeben, das aus der folgenden Liste ausgewählt werden kann.</p>
<h3 id="Werte">Werte</h3>
<dl>
<dt><code>separate</code></dt>
<dd>Standardwert. Jede Zelle besitzt ihre eigenen Rahmen, deren Abstand mit <a href="/de/CSS/border-spacing" title="de/CSS/border-spacing"><code>border-spacing</code></a> angegeben wird.</dd>
<dt><code>collapse</code></dt>
<dd>Benachbarte Zellen haben einen gemeinsame Rahmen.</dd>
<dt>inherit</dt>
<dd>Der Wert des Elternelements wird geerbt.</dd>
</dl>
<h2 id="Formal_definition">Formal definition</h2>
<p>{{CSSInfo}}</p>
<h2 id="Formal_syntax">Formal syntax</h2>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="Beispiele">Beispiele</h2>
<h3 id="A_colorful_table_of_browser_engines">A colorful table of browser engines</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><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></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">.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; }</pre>
<h4 id="Ergebnis">Ergebnis</h4>
<p>{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}</p>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Anmerkung</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS2.1', 'tables.html#borders', 'border-collapse') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Ursprüngliche Definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>
<p>{{Compat("css.properties.border-collapse")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>{{cssxref("border-spacing")}}, {{cssxref("border-style")}}, {{cssxref("caption-side")}}, {{cssxref("empty-cells")}}, {{cssxref("table-layout")}}</li>
</ul>
|
