border-collapse | スタイルシートリファレンス

適用できる要素table
継承あり
初期値separate

border-collapseとは?

CSSのborder-collapseプロパティは隣接するセルの枠線を共有するか(重ねる)、分離するか(間隔をあける)を設定するプロパティです。

border-collapseで指定できる値

CSSのborder-collapseプロパティがとる値はキーワード値で下記のいずれかを設定します。

  • collapse: 枠線を共有する(重ねる)
  • separate: 枠線を分離する(間隔をあける)

構文

border-collapse: collapse | separate;

border-collapseを使ったサンプルコード

上記のサンプルコードではborder-collapseプロパティでseparateとcollapseのそれぞれを設定した場合の比較です。

separateを設定した方ではborder-spacingプロパティが効き、セルの間で隙間が空いています。一方でcollapseプロパティを設定した方ではその隙間が埋まっています。

あわせて読みたい
border-spacing
CSSのborder-spacingプロパティはテーブル(表)のセルにおいて、隣接するセルの枠線との間隔を指定するプロパティです。border-spacingプロパティの構文や使い方をサンプルコード付きで解説します。

border-collapseのブラウザ対応状況

CSSのborder-collapseプロパティはモダンなブラウザのほぼ全てで対応しているプロパティです。border-collapseプロパティの各ブラウザ毎の対応状況を確認したい方は下記よりご確認頂けます。

Can I use... Support tables for HTML5, CSS3, etc