MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

概述

border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下,相邻的单元格都拥有独立的边框。在合并模式下,相邻单元格共享边框。

分隔(separated)模式是HTML表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性 border-spacing 来确定的。

合并(collapsed )模式下,表格相邻单元格共享边框。在这种模式下,CSS属性border-style的值inset表现为槽,值groove表现为脊。

初始值separate
适用元素table and inline-table elements
是否是继承属性yes
适用媒体visual
计算值as specified
是否适用于 CSS 动画
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

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

border-collapse: inherit;

separate
关键字,用于使用分隔的边框来绘制表格,是默认值。
collapse
关键字,用于使用合并的边框来绘制表格。

正式语法

collapse | separate

示例

查看独立的例子

查看在线演示

各浏览器引擎下的一个多彩表格

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; }

结果

特性

特性 状态 注释
CSS Level 2 (Revision 1)
border-collapse
Recommendation 初始定义

浏览器兼容性

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基础支持 1.0 1.0 (1.7 or earlier) 5.0 4.0 1.2 (125)
特性 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基础支持 2.3 1.0 (1.9.2) 7.0 11 3.0

文档标签和贡献者

 此页面的贡献者: xhlsrj, ziyunfei, sweetliu
 最后编辑者: xhlsrj,