mozilla

Version 486967 von border-collapse

  • Adressname der Version: CSS/border-collapse
  • Titel der Version: border-collapse
  • ID der Version: 486967
  • Erstellt:
  • Autor: SJW
  • Aktuelle Version? Nein
  • Kommentar

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>
<h2 id=".C3.9Cbersicht">Übersicht</h2>
<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>
<h2>Syntax</h2>
<pre class="eval">
border-collapse: separate | collapse | inherit
</pre>
<h2>Werte</h2>
<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>
<h2>Beispiele</h2>
<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>
<h2>Browser <span>Kompatibilität</span></h2>
<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>
<h2>Spezifikation</h2>
<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>
<h2>Siehe auch</h2>
<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