Title

border-collapseとは

border-collapse は次の語句からなるCSSのプロパティです。

border

読み: ボーダー
意味: 境界線

collapse

読み: コラプス
意味: つぶす,壊す

目次に戻る

border-collapseプロパティの概要

このプロパティは table要素 の境界線を結合、分離する為のプロパティです。

table要素内のセル要素には他の要素と同様に境界線がありますが、 初期値ではセル要素同士が結合しないようにセパレーターで仕切られています。

このセパレーターを崩したり、元に戻したりすることができるのが、このborder-collapseプロパティです。

目次に戻る

実機サンプルとサンプルコード

このプロパティはtable要素と内包されたth、tdなどのセル要素に対して有効です。 プロパティの有効性を検証する為にtableを作成して説明していきます。

準備: table要素の境界線を表示する

table要素は初期の状態では border が表示されません。これではサンプルの検証に 不便なので境界線が表示されるようにCSSで設定しておきます。

table,th,td{
	border: 1px solid black;
}

table,th,td{
	border-width: 1px;
	border-style: solid;
	border-color: black;
}

この2つのCSSコードは同じ意味となります。参考としてborderという総合プロパティを使った場合と、個別プロパティを使った場合で掲載しておきます。

• border-width: 1px;　境界線は1ピクセルです
• border-style: solid;　境界線の種類は1本線です。
• border-color: black;　境界線の色は黒です。

目次に戻る

構文

セレクター{border-collapse: 設定値;}

初期値: separate

table{border-collapse: separate;}

目次に戻る

キーワード値: collapse

先にも述べましたが、collapseは「壊す」とか「崩す」などの意味の単語です。 セパレーターを壊すことによって境界線が結合するということになります。

table{border-collapse: collapse;}

目次に戻る

グローバル値

border-collapseプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のseparateに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。

セレクター{border-collapse: グローバル値;}

目次に戻る

補足説明

• テーブル要素、またはテーブル内要素のみ適用可能
• 親要素の値を継承する

目次に戻る

まとめ

ここでは、検証としてtable要素に、このプロパティでCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

border-collapse: separate;

border-collapse: collapse;

目次に戻る