備忘録的プログラミングリファレンス

border-collapse プロパティ

 border-collapse プロパティは、<table> エレメントの border 線に関するプロパティです。 デフォルトでは二重線にみえる枠線を1つに表示することができます。

 <table> の枠線は、<table><td><th>エレメントのborder線がそれぞれに表示されるために二重線に見えます。これをborder-collapse プロパティによって一重線に表示します。

<table> の罫線を1重に(Exampleを参照
table {
	border-collapse: collapse;
}

 border-collapse: collapse;によって、<th><td>エレメントのborder線として表示されます。

ページ内 Index

構文(Syntax)

CSS

border-collapse: separate | collapse | initial | inherit ;

DOM ( JavaScript )

値の取得
String = object.style.borderCollapse;
値の設定
object.style.borderCollapse=" separate | collapse | initial | inherit ";

値(Values)

Value摘要
separate初期値(default値)、<table><th><td>、それぞれのborder線を表示
collapse<table>エレメントのborder線を一重線で表示
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)separate
継承(Inherited)yes
変化(Animatable)no

Example

 border-collapseの例です。<table>の罫線を2重か、1重にするかを設定できます。
 上はデフォルトの設定、下は罫線を1重にしています。