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

border-collapseプロパティ

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

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

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

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

構文(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重にしています。