mozilla

Version 503431 von border-collapse

  • Adressname der Version: Web/CSS/border-collapse
  • Titel der Version: border-collapse
  • ID der Version: 503431
  • Erstellt:
  • Autor: SJW
  • Aktuelle Version? Nein
  • Kommentar
Schlagwörter: 

Inhalt der Version

{{ CSSRef("CSS Tables") }}

Übersicht

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

{{cssbox("border-collapse")}}

Syntax

border-collapse: {{csssyntax("border-collapse")}}

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

Spezifikation

Spezifikation Status Anmerkung
{{ SpecName('CSS2.1', 'tables.html#borders', 'border-collapse') }} {{ Spec2('CSS2.1') }}  

Browser Kompatibilität

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1.0") }} 5.0 4.0 1.2 (125)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("1.9.2") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Siehe auch

Quelltext der Version

<p>{{ CSSRef("CSS Tables") }}</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>
<p>{{cssbox("border-collapse")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="eval">
border-collapse: {{csssyntax("border-collapse")}}

</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>
<h2 id="Beispiele">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>Spezifikation</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>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_Kompatibilit.C3.A4t">Browser <span>Kompatibilität</span></h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>1.0</td>
    <td>{{ CompatGeckoDesktop("1.0") }}</td>
    <td>5.0</td>
    <td>4.0</td>
    <td>1.2 (125)</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE&nbsp;Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatGeckoMobile("1.9.2") }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="Siehe_auch">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>
Zu dieser Version zurücksetzen