mozilla

Revision 20958 of border-collapse

  • Revision slug: CSS/border-collapse
  • Revision title: border-collapse
  • Revision id: 20958
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 50 words added, 1 words removed

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.

  • {{ 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

Values

separate
Default, use the "separated borders" rendering model
collapse
Use the "collapsed borders" 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

Notes

In the "collapsed border" rendering model, the {{ Cssxref("border-style") }} value of inset behaves like groove, and outset behaves like ridge.

Specifications

Browser compatibility

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

See also

{{ CSS_Reference:Table_Properties() }}

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<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.</p>
<ul> <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>
<h3>Syntax</h3>
<pre>border-collapse:  collapse | separate | inherit</pre>
<h3>Values</h3>
<dl><dt>separate</dt><dd>Default, use the "separated borders" rendering model</dd><dt>collapse</dt><dd>Use the "collapsed borders" rendering model</dd></dl>
<h3>Examples</h3>
<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><h3>Notes</h3>
<p>In the "collapsed border" rendering 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>
<h3>Specifications</h3>
<ul> <li><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 Table #borders</a></li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td><strong>5.0</strong></td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.0</strong> (1.0)</td> </tr> <tr> <td>Opera</td> <td><strong>4.0</strong></td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>1.2</strong> (125)</td> </tr> </tbody>
</table>
<h3>See also</h3>
<p>{{ CSS_Reference:Table_Properties() }}</p>
<p>{{ languages( { "es": "es/CSS/border-collapse", "fr": "fr/CSS/border-collapse", "pl": "pl/CSS/border-collapse" } ) }}</p>
Revert to this revision