このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

border-collapse:境界線の共有

記事Feb. 16th,2021
テーブルの隣接するセルの境界線を共有するかを指定する
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 border-collapse: separate;
適用対象 テーブル要素とインライン・テーブル要素
継承 する
パーセント値 パーセント値は指定できません

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”の順に優先されます。
境界線の違いが色だけである場合
セルの境界線が最も優先され、続いて行、行グループ、列、列グループ、テーブルの境界線の順に優先されます。同種の要素の境界線は書字方向が左から右である場合は左上にあるもの、書字方向が右から左である場合は右上にある要素の境界線が優先されます。

仕様書

Level 1 Level 2
勧告(REC) 勧告(REC)
border-collapse
定義なし

定義あり
Level 1 Level 2
勧告(REC) 勧告(REC)
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>
<tr>
<td class="banana">バナナ</td>
<td class="apple">リンゴ</td>
<td class="peach">モモ</td>
</tr>
<tr>
<td class="kiwi">キウイ</td>
<td class="mangosteen">マンゴスチン</td>
<td class="melon">メロン</td>
</tr>
<tr>
<td class="orange">オレンジ</td>
<td class="grape">ブドウ</td>
<td class="durian">ドリアン</td>
</tr>
</table>
バナナ リンゴ モモ
キウイ マンゴスチン メロン
オレンジ ブドウ ドリアン

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

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;}
<table>
<tr>
<td class="banana">バナナ</td>
<td class="apple">リンゴ</td>
<td class="peach">モモ</td>
</tr>
<tr>
<td class="kiwi">キウイ</td>
<td class="mangosteen">マンゴスチン</td>
<td class="melon">メロン</td>
</tr>
<tr>
<td class="orange">オレンジ</td>
<td class="grape">ブドウ</td>
<td class="durian">ドリアン</td>
</tr>
</table>
バナナ リンゴ モモ
キウイ マンゴスチン メロン
オレンジ ブドウ ドリアン
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク