border-collapse

  • Revision slug: CSS/border-collapse
  • Revision title: border-collapse
  • Revision id: 313505
  • Created:
  • Creator: trevorh
  • Is current revision? No
  • Comment Reorder compatability table

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 the use of the separated-border table rendering model. It is the default value.
collapse
Is a keyword requesting the use of the collapsed-border table rendering model.

Examples

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

th, td { border: solid 1px red; }
table { border-collapse: collapse; }
border-collapse: separate
Browser Layout Engine
Internet Explorer Trident
Firefox Gecko
Opera Presto
Safari WebKit
border-collapse: collapse
Browser Layout Engine
Internet Explorer Trident
Firefox Gecko
Opera Presto
Safari WebKit

Specifications

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

Browser compatibility

{{ 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() }}

See also

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

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">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><dfn>{{ Xref_cssinitial() }}</dfn><code> separate</code></li>
  <li><dfn>Applies to</dfn><code> table </code>and<code> inline-table </code>elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> Yes</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> as specified</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">
border-collapse:  collapse | separate | inherit</pre>
<p>where:</p>
<dl>
  <dt>
    <code>separate</code></dt>
  <dd>
    Is a keyword requesting the use of the separated-border table rendering model. It is the default value.</dd>
  <dt>
    collapse</dt>
  <dd>
    Is a keyword requesting the use of the collapsed-border table rendering model.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>{{ CSSRefExampleLink("border-collapse") }}</p>
<pre class="brush: css">
th, td { border: solid 1px red; }
table { border-collapse: collapse; }
</pre>
<table style="display: inline-table; margin: 1em; border: dashed 6px; border-collapse:separate;">
  <caption>
    <code>border-collapse: separate</code></caption>
  <tbody>
    <tr>
      <th style="border: solid 2px red;">Browser</th>
      <th style="border: solid 2px lime;">Layout Engine</th>
    </tr>
    <tr>
      <td style="border: solid 2px blue;">Internet Explorer</td>
      <td style="border: solid 2px red;">Trident</td>
    </tr>
    <tr>
      <td style="border: solid 2px lime;">Firefox</td>
      <td style="border: solid 2px blue;">Gecko</td>
    </tr>
    <tr>
      <td style="border: solid 2px red;">Opera</td>
      <td style="border: solid 2px lime;">Presto</td>
    </tr>
    <tr>
      <td style="border: solid 2px blue;">Safari</td>
      <td style="border: solid 2px red;">WebKit</td>
    </tr>
  </tbody>
</table>
<table style="display: inline-table; margin: 1em; border: dashed 6px;  border-width:6px">
  <caption>
    <code>border-collapse: collapse</code></caption>
  <tbody>
    <tr>
      <th style="border: solid 2px red;">Browser</th>
      <th style="border: solid 2px lime;">Layout Engine</th>
    </tr>
    <tr>
      <td style="border: solid 2px blue;">Internet Explorer</td>
      <td style="border: solid 2px red;">Trident</td>
    </tr>
    <tr>
      <td style="border: solid 2px lime;">Firefox</td>
      <td style="border: solid 2px blue;">Gecko</td>
    </tr>
    <tr>
      <td style="border: solid 2px red;">Opera</td>
      <td style="border: solid 2px lime;">Presto</td>
    </tr>
    <tr>
      <td style="border: solid 2px blue;">Safari</td>
      <td style="border: solid 2px red;">WebKit</td>
    </tr>
  </tbody>
</table>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</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_compatibility">Browser compatibility</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="See_also">See also</h2>
<ul>
  <li>Table-related CSS properties: {{ CSS_Reference:Table_Properties() }}</li>
</ul>
Revert to this revision