border-collapse

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

• 合并（collapsed）模式下，表格中相邻单元格共享边框。在这种模式下，CSS属性border-style的值inset表现为槽，值outset表现为脊。
• 分隔（separated）模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性border-spacing来确定的。

示例

/* keyword values */
border-collapse: collapse;
border-collapse: separate;

/* global values */
border-collapse: inherit;
border-collapse: initial;
border-collapse: unset;

浏览器支持

浏览器都支持border-collapse

语法：

border-collapse：separate|collapse

取值

• separate：默认值。每个单元格拥有独立的边框（采用 separated-border 表格渲染模型）。
• collapse：相邻的单元格共用同一条边框（采用 collapsed-border 表格渲染模型）。

说明：

设置或检索表格的行和单元格的边是合并还是独立。

• 只有当表格边框独立（即border-collapse属性等于separate时），border-spacing和empty-cells才起作用。
• 对应的脚本特性为borderCollapse。

例子

//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="ed">edge</td> <td class="tr">edgehtml</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="ed">edge</td> <td class="tr">edgehtml</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; }