边界崩溃 | border-collapse - Miscellaneous Level 2 - CSS教程

边界崩溃 | border-collapse

border-collapseCSS属性指定表的边界是否被分离（区块具有彼此不同的边界）或折叠（相邻小区共享边界）。

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

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

仅在_separated-分离边界模型中，单元格之间的距离由border-spacing属性定义。

仅在collapsed-折叠的边界模型中，行为的border-style值和行为类似。insetgrooveoutsetridge

Initial value	separate
应用对象	table and inline-table elements
是否可继承	yes
媒体	visual
计算值	as specified
动画类型	discrete
规范顺序	the unique non-ambiguous order defined by the formal grammar

语法

该border-collapse属性被指定为单个关键字，可以从下面的列表中选择。

值

separate相邻的单元格有不同的边界（分离的边界表格渲染模型）。

形式语法

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="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 5px;
}

table th,
table td {
  border: solid 3px;
}

.fx { border-color: orange blue; }
.gk { border-color: black red; }
.ed { 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; }

结果

规范

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

浏览器兼容性

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