mozilla

Revision 20949 of border-collapse

  • Revision slug: CSS/border-collapse
  • Revision title: border-collapse
  • Revision id: 20949
  • Created:
  • Creator: Fredchat
  • Is current revision? No
  • Comment /* See also */

Revision Content

{{template.CSSRef()}}

Summary

The border-collapse property is used to make the border collapse. This has a big influence on the look and style of the table cells. The rendering of table borders is divided into two categories in CSS2 - "collapsed" and "separated". This property specifies which border rendering mode to use. In the collapsed border model, adjacent table cells share borders. In the separated model, adjacent cells each have their own distinct borders (the distance between them given by the 'border-spacing' property.)

  • Initial value: Separate
  • Inherited: Yes
  • Media: Visual

Syntax

border-collapse: value

Values

  • inherit : Explicitly sets the value of this property to that of the parent.
  • separate : Use the "separated borders" rendering model
  • collapse : Use the "collapsed borders" rendering model

Examples

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

<table border="1" style="border-collapse: collapse" bordercolor="#111111" width="500">
<table border="1" style="border-collapse: separate" bordercolor="#111111" width="500">

Notes

In the "collapsed border" rendering model, the 'border-style' value of "inset" behaves like "groove", and "outset" behaves like "ridge." CSS2 specifies that the initial value for this property is "collapse", but CSS2.1 and Mozilla/Opera all state or behave such that the initial value is "separate."

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer 5.5
Netscape 7
Opera 5


See also

{{template.Cssxref("CSS:border-spacing")}}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>The border-collapse property is used to make the border collapse. This has a big influence on the look and style of the table cells.
The rendering of table borders is divided into two categories in CSS2 - "collapsed" and "separated". This property specifies which border rendering mode to use. In the collapsed border model, adjacent table cells share borders.
In the separated model, adjacent cells each have their own distinct borders (the distance between them given by the 'border-spacing' property.)
</p>
<ul><li> Initial value: Separate
</li><li> Inherited: Yes
</li><li> Media: <a href="en/CSS/Media/Visual">Visual</a>
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">border-collapse: value
</pre>
<h3 name="Values"> Values </h3>
<ul><li> <b>inherit</b> : Explicitly sets the value of this property to that of the parent.
</li><li> <b>separate</b> : Use the "separated borders" rendering model
</li><li> <b>collapse</b> : Use the "collapsed borders" rendering model
</li></ul>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("border-collapse")}}
</p>
<pre>&lt;table border="1" style="border-collapse: collapse" bordercolor="#111111" width="500"&gt;
</pre>
<pre>&lt;table border="1" style="border-collapse: separate" bordercolor="#111111" width="500"&gt;
</pre>
<h3 name="Notes"> Notes </h3>
<p>In the "collapsed border" rendering model, the 'border-style' value of "inset" behaves like "groove", and "outset" behaves like "ridge." CSS2 specifies that the initial value for this property is "collapse", but CSS2.1 and Mozilla/Opera all state or behave such that the initial value is "separate."
</p>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/tables.html#collapsing-borders">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/REC-CSS2/tables.html#borders">CSS 3</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>5.5</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>5</td>
  </tr>
</tbody></table>
<p><br>
</p>
<h3 name="See_also"> See also </h3>
<p>{{template.Cssxref("CSS:border-spacing")}}
</p>
Revert to this revision