mozilla

Revision 20963 of border-collapse

  • Revision slug: CSS/border-collapse
  • Revision title: border-collapse
  • Revision id: 20963
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 6 words added

Revision Content

{{ CSSRef() }}

Summary

The border-collapse CSS property selects a table's border model. This has a big influence on the look and style of the table cells.

The separated model is the traditional HTML table border model. Adjacent cells each have their own distinct borders. The distance between them given by the {{ Cssxref("border-spacing") }} property.

In the collapsed border model, adjacent table cells share borders. In that model, the {{ Cssxref("border-style") }} value of inset behaves like groove, and outset behaves like ridge.

  • {{ Xref_cssinitial() }}: separate
  • Applies to: table and inline-table elements
  • {{ Xref_cssinherited() }}: Yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

border-collapse:  collapse | separate | inherit

where:

separate
Is a keyword requesting to use the separated-border table rendering model. It is the default value.
collapse
Is a keyword requesting to use the collapsed-border table rendering model.

Examples

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

th, td { border: solid 1px red; }
table { border-collapse: collapse; }
<table border=6>
Browser Layout Engine
Internet Explorer Trident
Firefox Gecko
Opera Presto
Safari WebKit
<table border=6 style=
"border-collapse:collapse">
Browser Layout Engine
Internet Explorer Trident
Firefox Gecko
Opera Presto
Safari WebKit

Specifications

Specification Status Comment
CSS 2.1 {{ Spec2('CSS2.1') }}  

Browser compatibility

{{ CompatibilityTable() }}

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

See also

  • Table-related CSS properties: {{ CSS_Reference:Table_Properties() }}

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

Revision Source

<p>{{ CSSRef() }}</p>
<h2>Summary</h2>
<p>The<code> border-collapse </code>CSS property selects a table's border model. This has a big influence on the look and style of the table cells.</p>
<p>The <em>separated</em> model is the traditional HTML table border model. Adjacent cells each have their own distinct borders. The distance between them given by the {{ Cssxref("border-spacing") }} property.</p>
<p>In the <em>collapsed</em> border model, adjacent table cells share borders. In that model, the {{ Cssxref("border-style") }} value of <code>inset</code> behaves like <code>groove</code>, and <code>outset</code> behaves like <code>ridge</code>.</p>
<ul class="cssprop"> <li>{{ Xref_cssinitial() }}:<code> separate</code></li> <li>Applies to:<code> table </code>and<code> inline-table </code>elements</li> <li>{{ Xref_cssinherited() }}: Yes</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h2>Syntax</h2>
<pre class="syntaxbox">border-collapse:  collapse | separate | inherit</pre>
<p>where:</p>
<dl> <dt>separate</dt> <dd>Is a keyword requesting to use the separated-border table rendering model. It is the default value.</dd> <dt>collapse</dt> <dd>Is a keyword requesting to use the collapsed-border table rendering model.</dd>
</dl>
<h2>Examples</h2>
<p>{{ CSSRefExampleLink("border-collapse") }}</p>
<pre>th, td { border: solid 1px red; }
table { border-collapse: collapse; }
</pre>
<table border="6" style="display: inline-table; margin: 1em;"> <caption><code>&lt;table border=6&gt;</code></caption> <tbody> <tr> <th>Browser</th> <th>Layout Engine</th> </tr> <tr> <td>Internet Explorer</td> <td>Trident</td> </tr> <tr> <td>Firefox</td> <td>Gecko</td> </tr> <tr> <td>Opera</td> <td>Presto</td> </tr> <tr> <td>Safari</td> <td>WebKit</td> </tr> </tbody>
</table>
<table border="6" style="display: inline-table; border-collapse: collapse; margin: 1em;"> <caption><code>&lt;table border=6 style=<br> "border-collapse:collapse"&gt;</code></caption> <tbody> <tr> <th>Browser</th> <th>Layout Engine</th> </tr> <tr> <td>Internet Explorer</td> <td>Trident</td> </tr> <tr> <td>Firefox</td> <td>Gecko</td> </tr> <tr> <td>Opera</td> <td>Presto</td> </tr> <tr> <td>Safari</td> <td>WebKit</td> </tr> </tbody>
</table>
<h2>Specifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS21/tables.html#borders" title="http://www.w3.org/TR/CSS21/tables.html#borders">CSS 2.1</a></td> <td>{{ Spec2('CSS2.1') }}</td> <td> </td> </tr> </tbody>
</table>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Firefox (Gecko)</th> <th>Chrome</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatGeckoDesktop("1.0") }}</td> <td>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>Firefox Mobile (Gecko)</th> <th>Android</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatGeckoMobile("1.9.2") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h2>See also</h2>
<ul> <li>Table-related CSS properties: {{ CSS_Reference:Table_Properties() }}</li>
</ul>
<p>{{ languages( { "de": "de/CSS/border-collapse", "es": "es/CSS/border-collapse", "fr": "fr/CSS/border-collapse", "pl": "pl/CSS/border-collapse" } ) }}</p>
Revert to this revision