CSS border-collapse

CSS の border-collapse は、HTML の <table> 要素 に適用できるプロパティで、テーブルのセル同士の枠線（ボーダー）の表示方法を指定するものです。

書式

border-collapse: collapse

属性値

collapse

以下の値から選びます。

値	説明
collapse	隣のセルの枠線と重ねて表示
separate	隣のセルの枠線と離して表示
inherit	上位のスタイルを継承

初期値

separate

適用対象

以下に示す要素に対して、border-collapse プロパティを適用できる。

• table
• display プロパティに inline-table を指定した要素

継承

親要素の border-collapse プロパティの値が子要素へ継承される。

例

次に、隣のセルの枠線と離して表示する表の例を示します。

<table style="border-collapse: separate">
  <caption>銀行コード</caption>
  <thead>
    <tr>
      <th style="border: 1px black solid">銀行</th>
      <th style="border: 1px black solid">銀行コード</th>
    </tr>
  <thead>
  <tbody>
    <tr>
      <td style="border: 1px black solid">みずほ銀行</td>
      <td style="border: 1px black solid">0001</td>
    </tr>
    <tr>
      <td style="border: 1px black solid">ゆうちょ銀行</td>
      <td style="border: 1px black solid">9900</td>
    </tr>
  <tbody>
</table>

<table style="border-collapse: collapse">
  <caption>銀行コード</caption>
  <thead>
    <tr>
      <th style="border: 1px black solid">銀行</th>
      <th style="border: 1px black solid">銀行コード</th>
    </tr>
  <thead>
  <tbody>
    <tr>
      <td style="border: 1px black solid">みずほ銀行</td>
      <td style="border: 1px black solid">0001</td>
    </tr>
    <tr>
      <td style="border: 1px black solid">ゆうちょ銀行</td>
      <td style="border: 1px black solid">9900</td>
    </tr>
  <tbody>
</table>

関連記事

• border-spacing
• caption-side
• empty-cells
• table-layout

参考文献

World Wide Web Consortium (2025) Cascading Style Sheets (CSS) Level 2