CSSのborder-collapseとは？表の枠線をスマートに見せるテクニックを徹底解説！

HTMLで表（テーブル）を作成した際、枠線が二重になってしまい「なんだか見た目がイマイチ…」と感じたことはありませんか？
そんなときに活躍するのが、CSSのborder-collapseプロパティです。
このプロパティを使うことで、テーブルの見た目をスッキリ整えることができます。

本記事では、border-collapseの基本的な使い方から、collapseとseparateの違い、よくある間違いとその対策、実際のコード例までをわかりやすく解説します。
CSS初心者の方でもすぐに実践できる内容になっていますので、ぜひ最後まで読んで、あなたのWebページをより美しく仕上げていきましょう。

border-collapseとは？
border-collapseの基本的な構文
collapseとseparateの違いを比較
1. separate（デフォルト）
2. collapse
border-collapseを使う際の注意点
1. 1. border-spacingと併用できない
2. 2. border-styleやborder-widthも調整しよう
実際の活用例：罫線を使った表のスタイリング
よくあるエラーとその対処法
1. 表の枠線が表示されない！
2. 枠線の色や太さがバラバラになる
border-collapseはいつ使うべき？
まとめ

border-collapseとは？

border-collapseは、HTMLの<table>タグに適用できるCSSプロパティで、テーブル内の枠線（ボーダー）の表示方法を制御します。
具体的には、セルとセルの間の枠線を「1本にするか（collapse）」、「分けて表示するか（separate）」を決定する役割を持っています。

デフォルト値はseparateで、これは各セルが独立して枠線を持つ表示になります。
一方で、collapseを指定すると、隣接するセルの枠線が1本にまとめられ、見た目がスッキリします。

border-collapseの基本的な構文

使い方は非常にシンプルです。テーブルに対して以下のように指定します。

table {
  border-collapse: collapse;
}

このようにすることで、テーブルのセル同士の間にあった“二重の線”が消え、ひとつの線として表示されるようになります。

collapseとseparateの違いを比較

では、実際に2つの指定がどのように見た目に影響するのか、比較してみましょう。

separate（デフォルト）

<table border="1" style="border-collapse: separate;">
  <tr>
    <td>セル1</td>
    <td>セル2</td>
  </tr>
</table>

この場合、各セルが独自に枠線を持ち、境界部分が二重線のように見えます。

collapse

<table border="1" style="border-collapse: collapse;">
  <tr>
    <td>セル1</td>
    <td>セル2</td>
  </tr>
</table>

こちらは、隣接するセルの間にある枠線が1本にまとめられ、スッキリとした見た目になります。
ビジネス向けの表やデータテーブルなど、視認性を重視したいときには特に有効です。

border-collapseを使う際の注意点

1. border-spacingと併用できない

border-collapse: collapseを使うと、border-spacingプロパティ（セル間のスペース調整）は無効になります。
border-spacingを活用したい場合は、border-collapse: separateを使用する必要があります。

table {
  border-collapse: separate;
  border-spacing: 10px;
}

2. border-styleやborder-widthも調整しよう

border-collapseを指定しても、線の太さやスタイルが思い通りに表示されない場合があります。
その際は、border-styleやborder-widthの設定を確認しましょう。

td {
  border: 1px solid black;
}

実際の活用例：罫線を使った表のスタイリング

以下は、シンプルで見やすいテーブルを作る際のCSSサンプルです。

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #333;
    padding: 8px;
    text-align: left;
  }

  th {
    background-color: #f2f2f2;
  }
</style>

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>田中太郎</td>
    <td>30</td>
    <td>エンジニア</td>
  </tr>
</table>