CSSのborder-collapseでテーブルのセルの枠線を統合・分離し、レイアウトを調整する方法をわかりやすく解説

CSSのborder-collapseプロパティは、テーブルのセルの枠線が互いに重なるかどうかを制御するために使用されます。このプロパティにより、枠線が分離されたり、1つに統合されたりする様子を指定できます。以下に、主要な値とその効果をリストで説明し、詳細な表示例を紹介します。

border-collapseプロパティの値とその効果の一覧

• border-collapse: collapse; – 隣接するセルの枠線が統合され、1つの枠線として表示されます。
• border-collapse: separate; – セルの枠線が分離され、セルごとに独立した枠線が表示されます。

注意点や関連情報

border-collapseプロパティは、主にテーブルのデザインで使用されます。collapseを使用すると、隣接するセルの枠線が1つにまとめられるため、よりシンプルなテーブルデザインが可能です。一方、separateは、各セルが独立した枠線を持つため、枠線のスタイルに影響を与えます。border-spacingは、separateが指定されている場合にのみ適用されます。

border-collapseが効かない理由として考えられること

適用されている要素がtableでない

border-collapseは、テーブル要素にのみ適用されるプロパティです。非テーブル要素に設定しても、このプロパティは機能しません。
対策：border-collapseを適用する要素が<table>であることを確認し、テーブルレイアウト以外の要素には使用しないようにします。

テーブル内のセルに個別のborderが設定されている

テーブル内のセルに個別にborderが設定されている場合、border-collapseの効果が無効化され、期待通りの動作をしないことがあります。
対策：テーブル全体に対して適用するborder設定を見直し、セルに個別にborderを適用しないようにします。また、セルのborderプロパティを確認し、必要に応じて調整します。

共通するCSSコード

.css-sample-container {
      width: 100%;
      margin: 20px auto;
      padding: 20px;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
    }

    table {
      width: 100%;
      border-spacing: 10px;
    }

    table td, table th {
      padding: 10px;
      background-color: #cce7ff;
      border: 2px solid #99ccff;
      text-align: center;
    }
  

border-collapse: collapse;

隣接するセルの枠線が統合され、枠線が重なります。テーブルの枠線を一体化させたい場合に使用します。

HTMLコード

<div class="css-sample-container">
      <table class="css-sample-collapse">
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
        <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
        </tr>
      </table>
    </div>
  

CSSコード

.css-sample-collapse {
      border-collapse: collapse;
    }
  

表示結果

border-collapse: separate;

各セルの枠線が独立して表示されます。テーブルに各セルの枠線が独立した状態で表示されます。

HTMLコード

<div class="css-sample-container">
      <table class="css-sample-separate">
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
        <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
        </tr>
      </table>
    </div>
  

CSSコード

.css-sample-separate {
      border-collapse: separate;
    }
  

表示結果

まとめ

• border-collapseプロパティは、テーブルのセルの枠線が重なるか分離するかを制御します。
• collapseは隣接するセルの枠線が1つに統合され、separateはセルごとに枠線が独立します。
• 枠線の間隔はborder-spacingプロパティで調整できますが、separateのときのみ適用されます。