mozilla

Version 117407 von border-collapse

  • Adressname der Version: CSS/border-collapse
  • Titel der Version: border-collapse
  • ID der Version: 117407
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Nein
  • Kommentar 9 words added, 7 words removed
Schlagwörter: 

Inhalt der Version

{{ CSSRef() }}

Übersicht

Die border-collapse Eigenschaft bestimmt, ob die Rahmen innerhalb einer Tabelle zusammenfallen oder getrennt dargestellt werden.

  • Standardwert: separate
  • Anwendbar auf: table und inline-table Elemente
  • Vererbbar: Ja
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: wie festgelegt

Syntax

border-collapse: separate | collapse | inherit

Werte

separate
Standardwert. Jede Zelle besitzt ihre eigenen Rahmen, deren Abstand mit border-spacing angegeben wird.
collapse
Die Zellen werden nur von einem Rahmen getrennt.
inherit
Der Wert des Elternelements wird geerbt.

Beispiele

Live Beispiel

.separate {                      
  border-collapse: separate;
}
1A 2A
2A 2B
.collapse {
  border-collapse: collapse;
}
1A 2A
2A 2B

Browser Kompatibilität

Browser ab Version
Internet Explorer 5.0
Firefox (Gecko) 1.0 (1.0)
Opera 4.0
Safari (WebKit) 1.2 (125)

Spezifikation

Siehe auch

{{ languages( { "en": "en/CSS/border-collapse", "fr": "fr/CSS/border-collapse", "pl": "pl/CSS/border-collapse", "es": "es/CSS/border-collapse" } ) }}

Quelltext der Version

<p>{{ CSSRef() }}</p>
<h3 id="Übersicht">Übersicht</h3>
<p>Die <code>border-collapse</code> Eigenschaft bestimmt, ob die Rahmen innerhalb einer Tabelle zusammenfallen oder getrennt dargestellt werden.</p>
<ul> <li>Standardwert: <code>separate</code></li> <li>Anwendbar auf: <code>table</code> und <code>inline-table</code> Elemente</li> <li>Vererbbar: Ja</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: wie festgelegt</li>
</ul>
<h3 id="Syntax">Syntax</h3>
<pre class="eval">border-collapse: separate | collapse | inherit
</pre>
<h3 id="Werte">Werte</h3>
<dl> <dt>separate</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>collapse</dt> <dd>Die Zellen werden nur von einem Rahmen getrennt.</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd>
</dl>
<h3 id="Beispiele">Beispiele</h3>
<p><a class=" external" href="http://developer.mozilla.org/samples/cssref/border-collapse.html">Live Beispiel</a></p>
<pre>.separate {                      
  border-collapse: separate;
}
</pre>
<table style="border:1px solid black;border-collapse:seperate;"> <tbody> <tr> <td style="border:1px solid black;">1A</td> <td style="border:1px solid black;">2A</td> </tr> <tr> <td style="border:1px solid black;">2A</td> <td style="border:1px solid black;">2B</td> </tr> </tbody>
</table>
<pre>.collapse {
  border-collapse: collapse;
}
</pre>
<table style="border:1px solid black;border-collapse:collapse"> <tbody> <tr> <td style="border:1px solid black;">1A</td> <td style="border:1px solid black;">2A</td> </tr> <tr> <td style="border:1px solid black;">2A</td> <td style="border:1px solid black;">2B</td> </tr> </tbody>
</table>
<h3 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> </tr> <tr> <td>Internet Explorer</td> <td>5.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>4.0</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.2 (125)</td> </tr> </tbody>
</table>
<h3 id="Spezifikation">Spezifikation</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse" lang="en">CSS 2.1 Table #border-collapse</a></li>
</ul>
<h3 id="Siehe_auch">Siehe auch</h3>
<ul> <li><a href="/de/CSS/border-spacing" title="de/CSS/border-spacing"><code>border-spacing</code></a>, <a href="/de/CSS/caption-side" title="de/CSS/caption-side"><code>caption-side</code></a>, <a href="/de/CSS/empty-cells" title="de/CSS/empty-cells"><code>empty-cells</code></a>, <a href="/de/CSS/table-layout" title="de/CSS/table-layout"><code>table-layout</code></a></li>
</ul>
<p>{{ languages( { "en": "en/CSS/border-collapse", "fr": "fr/CSS/border-collapse", "pl": "pl/CSS/border-collapse", "es": "es/CSS/border-collapse" } ) }}</p>
Zu dieser Version zurücksetzen