border-collapse

border-collapse

The border-collapse CSS property determines whether a table's borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.

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 border-spacing property.

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

Initial value separate
Applies to table and inline-table elements
Inherited yes
Media visual
Computed value as specified
Animation type discrete
Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

border-collapse: collapse;
border-collapse: separate;

border-collapse: inherit;

Values

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.

Formal syntax

collapse | separate

Examples

A colorful table of browser engines

HTML

<table class="separate">
    <caption><code>border-collapse: separate</code></caption>
    <tbody>
        <tr><th>Browser</th> <th>Layout Engine</th>
        </tr>
        <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td>
        </tr>
        <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td>
        </tr>
        <tr><td class="sa">Safari</td> <td class="wk">Webkit</td>
        </tr>
        <tr><td class="ch">Chrome</td> <td class="bk">Blink</td>
        </tr>
        <tr><td class="op">Opera</td> <td class="bk">Blink</td>
        </tr>
    </tbody>
</table>
<table class="collapse">
    <caption><code>border-collapse: collapse</code></caption>
    <tbody>
        <tr><th>Browser</th> <th>Layout Engine</th>
        </tr>
        <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td>
        </tr>
        <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td>
        </tr>
        <tr><td class="sa">Safari</td> <td class="wk">Webkit</td>
        </tr>
        <tr><td class="ch">Chrome</td> <td class="bk">Blink</td>
        </tr>
        <tr><td class="op">Opera</td> <td class="bk">Blink</td>
        </tr>
    </tbody>
</table>

CSS

.collapse {
    border-collapse: collapse;
}
.separate {
    border-collapse: separate;
}
table {
    display: inline-table;
    margin: 1em;
    border: dashed 6px;
    border-width: 6px;
}
table th, table td {
    border: solid 3px;
}
.fx { border-color: orange blue; }
.gk { border-color: black red; }
.ie { border-color: blue gold; }
.tr { border-color: aqua; }
.sa { border-color: silver blue; }
.wk { border-color: gold blue; }
.ch { border-color: red yellow green blue; }
.bk { border-color: navy blue teal aqua; }
.op { border-color: red; }

Result

Specifications

Specification Status Comment
CSS Level 2 (Revision 1)
The definition of 'border-collapse' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 1.0 (1.7 or earlier) 5.0 4.0 1.2 (125)
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.3 (Yes) 1.0 (1.9.2) 7.0 11 3.0

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部