“border-collapse”プロパティ:境界線の共有｜CSS－havin' a coffee break

＃

概要

初期値	“border-collapse: separate;”
適用対象	テーブル要素とインライン・テーブル要素
継承	Yes
パーセント値	パーセント値は指定できません
計算値	指定した値
アニメーション	離散

“border-collapse”プロパティはテーブルで隣接する行、列、セルのボーダーを共有するか、それとも分離するかを指定するプロパティです。

サンプルコード



table { border-collapse: collapse;}

＃

値

値	説明
collapse	隣接するセルの境界線を共有する
separate	隣接するセルの境界線を分離する
共通キーワード

＃

競合する境界線

“border-collapse”プロパティの値を“collapse”と指定したテーブルで、テーブルや行、列、セルの境界線が異なるスタイルを持つ場合、競合した境界線のどちらが優先されるかは以下のように定義されています。

いずれかの境界線に適用した“border-style”プロパティの値が“hidden”である場合
境界線は表示されません。: いずれかの境界線に適用した“border-style”プロパティの値が“none”である場合
“border-style”プロパティの値が“none”でない境界線が優先されます。いずれの境界線も“border-style”プロパティの値が“none”である場合は境界線が表示されません。: いずれかの境界線に適用した“border-style”プロパティの値も“hidden”でなく、少なくとも一つが“none”でない場合
太さが太い境界線が優先されます。いずれの境界線の太さも同じ場合は“double”が最も優先され、続いて“solid”、“dashed”、“dotted”、“ridge”、“outset”、“groove”、“inset”の順に優先されます。: 境界線の違いが色だけである場合
セルの境界線が最も優先され、続いて行、行グループ、列、列グループ、テーブルの境界線の順に優先されます。同種の要素の境界線は書字方向が左から右である場合は左上にあるもの、書字方向が右から左である場合は右上にある要素の境界線が優先されます。

＃

仕様書

定義されている仕様書



border-collapse



collapse
separate

＃

隣接するセルの境界線を共有する



table {


 border: 5px solid;

border-collapse: collapse;


}



table td { border: 5px solid;}



.banana { border-color: #ffd700;}

.apple { border-color: #dc143c;}

.peach { border-color: #ffdab9;}

.kiwi { border-color: #808000;}

.mangosteen { border-color: #db7093;}

.melon { border-color: #98fb98;}

.orange { border-color: #ffa500;}

.grape { border-color: #483d8b;}

.durian { border-color: #eee8aa;}

＃

隣接するセルの境界線を分離する



table {


 border: 5px solid;

border-collapse: separate;


}



table td { border: 5px solid;}



.banana { border-color: #ffd700;}

.apple { border-color: #dc143c;}

.peach { border-color: #ffdab9;}

.kiwi { border-color: #808000;}

.mangosteen { border-color: #db7093;}

.melon { border-color: #98fb98;}

.orange { border-color: #ffa500;}

.grape { border-color: #483d8b;}

.durian { border-color: #eee8aa;}