border-collapse

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

border-collapse CSS 屬性設定 <table> 元素內部的單元格是否共享邊框，或者擁有獨立的邊框。

試一試

border-collapse: collapse;

border-collapse: separate;

<section class="default-example" id="default-example">
  <table class="transition-all" id="example-element">
    <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;
}

當單元格邊框合併時，border-style 的 inset 值表現得像 ridge，而 outset 則表現得像 groove。

當單元格邊框分離時，單元格之間的距離由 border-spacing 屬性定義。

語法

css

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

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

border-collapse 屬性指定為一個單獨的關鍵字，可以從下面的列表中選擇。

值

collapse: 相鄰單元格共享邊框（合併邊框表格渲染模型）。
separate: 相鄰單元格擁有獨立的邊框（分離邊框表格渲染模型）。

正式定義

初始值	`separate`
應用於	`table` 和 `inline-table` 元素
繼承性	是
計算值	同指定值
動畫型別	離散

正式語法

border-collapse = 
  separate  |
  collapse

示例

一個五彩繽紛的瀏覽器引擎表格

HTML

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

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

結果

規範

規範
層疊樣式表級別 2 # propdef-border-collapse

瀏覽器相容性

另見

border-spacing, border-style
border-collapse 屬性改變 <table> HTML 元素的顯示效果。
CSS 表格模組

幫助改進 MDN

瞭解如何貢獻

本頁面由 MDN 貢獻者最後修改於 2025年7月14日。

在 GitHub 上檢視此頁面 • 報告此內容的問題