セルのボーダーの表示形式

説明

border-collapse: collapse; C2- ie5- N7-

値:	collapse \| separate \| inherit

初期値：collapse、適用要素：table要素 (display:inline-tableを含む)、継承：する、%値：なし、メディア：ビジュアル

このプロパティは、セルのボーダーの表示形式を指定します。「collapse」は隣り合うボーダー同士を重ねて表示し、「separate」は間隔を空けて別々に表示します。

*1 CSS2.1仕様書において、「border-collapseプロパティ」の初期値は「separate」に変更されました。

使用例


table.col {border-collapse:collapse}

table.sep {border-collapse:separate}

border-collapseの値

collapse	C2- ie5- N7- 隣り合うボーダー同士を重ねて表示します。初期値。
separate	C2- ie5- N7- セルのボーダーを、間隔を空けて別々に表示します。

セルボーダーの表示形式のレンダリング

collapse: border-style:hidden;

「border-collapse:collapse」におけるボーダーの優先順序

いかなる場合においても、「border-style:hidden」が最優先され、この値が適用された箇所にはボーダーは表示されません。また、「border-style:hidden」が指定されていない場合は、より太いボーダーが優先されます。幅が同じである場合には、「double」「solid」「dashed」「dotted」「ridge」「outset」「groove」「inset」の順に表示されます。ボーダーの種類も幅も同じで色だけが異なる場合は、「セル」「横列」「横列グループ」「縦列」「縦列グループ」「テーブル」の順に表示されます。

ボーダーの種類

<border-style>の値の中には、表に適用されると意味が変わるものがあります。*の付いた値がそれに該当します。

none	ボーダーを消します。太さも「0」にします。表のセルなどのボーダーが重なり合う場合は、ほかの値が優先されます。初期値。
hidden *	「border-collapse:collapse」の場合、該当する辺にボーダーを表示するのを禁止します。太さも「0」にします。
dotted	ボーダーを点線で表示。
dashed	ボーダーを破線で表示。
solid	ボーダーを実線で表示。
double	ボーダーを二重線で表示。
groove	ボーダーが凹んで見えるように表示。
ridge	ボーダーが突き出て見えるように表示。
inset *	「border-collapse:separate」の場合、ボックスのボーダーより内側全体が凹んで見えるように表示されます。「border-collapse:collapse」の場合、「ridge」と同じ表示になります。
outset *	「border-collapse:separate」の場合、ボックスのボーダーより内側全体が突き出て見えるように表示されます。「border-collapse:collapse」の場合、「groove」と同じ表示になります。

セルのボーダーの表示形式 (The collapsed borders model)

説明

使用例

border-collapseの値

セルボーダーの表示形式のレンダリング

「border-collapse:collapse」におけるボーダーの優先順序

ボーダーの種類