View in EnglishAlways switch to English

border-collapse

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

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

尝试一下

border-collapse: collapse;

border-collapse: separate;

<section>  <table>    <tr>      <td>Cell 1.1</td>      <td>Cell 1.2</td>    </tr>    <tr>      <td>Cell 2.1</td>      <td>Cell 2.2</td>    </tr>    <tr>      <td>Cell 3.1</td>      <td>Cell 3.2</td>    </tr>  </table></section>

table {  width: 15rem;  table-layout: fixed;}td {  border: 5px solid;  border-color: crimson dodgerblue orange limegreen;  padding: 0.75rem;}

合并（collapsed）模式下，表格中相邻单元格共享边框。在这种模式下，CSS 属性border-style 的值 inset 表现为槽，值 outset 表现为脊。

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

语法

css

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

border-collapse 的属性值被定义为一个单独的关键词，可为下面两个值中的一个。

值

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

正式语法

border-collapse =
separate|
collapse

示例

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

HTML

html

<table>  <caption>    <code>border-collapse: separate</code>  </caption>  <tbody>    <tr>      <th>Browser</th>      <th>Layout Engine</th>    </tr>    <tr>      <td>Firefox</td>      <td>Gecko</td>    </tr>    <tr>      <td>Edge</td>      <td>EdgeHTML</td>    </tr>    <tr>      <td>Safari</td>      <td>Webkit</td>    </tr>    <tr>      <td>Chrome</td>      <td>Blink</td>    </tr>    <tr>      <td>Opera</td>      <td>Blink</td>    </tr>  </tbody></table><table>  <caption>    <code>border-collapse: collapse</code>  </caption>  <tbody>    <tr>      <th>Browser</th>      <th>Layout Engine</th>    </tr>    <tr>      <td>Firefox</td>      <td>Gecko</td>    </tr>    <tr>      <td>Edge</td>      <td>EdgeHTML</td>    </tr>    <tr>      <td>Safari</td>      <td>Webkit</td>    </tr>    <tr>      <td>Chrome</td>      <td>Blink</td>    </tr>    <tr>      <td>Opera</td>      <td>Blink</td>    </tr>  </tbody></table>

CSS

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