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

border-spacing プロパティ

 border-spacing プロパティは、<table>エレメントのborder線に関する CSS のプロパティで、<table>のborder線と<th><td>エレメントのborder線のスペース幅を設定できます。

 border-spacing プロパティを利用するには、border-collapse: separate;でなければ効果がありません。

border-spacing の指定
border-collapse: separate;
border-spacing: 5px 15px;
詳しくは Example を参照してください

 border-spacing プロパティに指定する値は 数値 + 単位 です。
 値が1つでは、縦方向と横方向の一括指定です。値が2つの場合は、縦方向と横方向に分けた指定になります。 詳しくは値(Values)を参照してください。

 もしも右だけや左だけのスペースを設定する場合は padding を利用します。
 一部のセルの枠のスペースを変更するには、そのセルを id 属性で指定して paddingmargin を利用します。ただし、全体のレイアウトが崩れる可能性があります。

ページ内 Index

構文(Syntax)

CSS

border-spacing: length | initial | inherit;

DOM ( JavaScript )

値の取得
String = object.style.borderSpacing;
値の設定
object.style.borderSpacing="length | initial | inherit";

値(Values)

Value摘要
length長さの単位、初期値(default値)は2px。最小値は 0
initial初期値に戻す
inherit親エレメントのプロパティを継承

 border-spacing プロパティの値は1つまたは2つが指定できます。
 値が1つでは、縦方向と横方向が同じ幅になります。
 値が2つの場合は縦方向と横方向に分けた指定になります。

備考(Remarks)

初期値(Default value)2px
継承(Inherited)yes
変化(Animatable)yes

Example

 border-spacing プロパティの例です。
 <table><th><td>は色を分けて表示しています。

 example1 は border-spacing の値は1つで、縦方向と横方向が同じ幅です。
 example2 は 値が2つで、縦方向と横方向の幅に違いがあります。