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。

默认值	separate
适用于	table系元素
继承性	有
动画性	否
计算值	指定值

例子

//html

border-collapse: separate

browser	layout engine
firefox	gecko
edge	edgehtml
safari	webkit
chrome	blink
opera	blink

border-collapse: collapse

browser	layout engine
firefox	gecko
edge	edgehtml
safari	webkit
chrome	blink
opera	blink

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

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com