border-spacing プロパティ
border-spacing プロパティは、<table>エレメントの border 間の幅を指定する CSS のプロパティで、<table>の border 線と<th> や <td>の border 線の間の幅を指定します。
border-spacing プロパティを利用するには、border-collapse: separate;でなければ効果がありません。
border-collapse: separate; border-spacing: 5px 15px;
| 項目 | 項目 | 項目 |
|---|---|---|
| データ | データ | データ |
| データ | データ | データ |
border-spacing プロパティに指定する値は 数値 + 単位
です。
値が１つでは、横方向と縦方向の一括指定です。値が２つの場合は、横方向と縦方向に分けた指定になります。
詳しくは値（Values）
を参照してください。
もしも右だけや左だけのスペースを設定する場合は padding を利用します。
一部のセルの枠のスペースを変更するには、そのセルを id 属性で指定して padding や margin を利用します。ただし、全体のレイアウトが崩れる可能性があります。
ページ内 Index
- ad -
構文(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 プロパティの値は１つまたは２つが指定できます。
値が１つでは、横方向と縦方向が同じ幅になります。
値が２つの場合は横方向と縦方向の指定になります。
備考（Remarks）
| 初期値（Default value） | 2px |
| 継承（Inherited） | yes |
| 変化（Animatable） | yes |
Example
border-spacing プロパティの例です。
<table>、<th>と<td>は色を分けて表示しています。
example1 は border-spacing の値は１つで、縦方向と横方向が同じ幅です。
example2 は 値が２つで、横方向と縦方向を別々に指定しています。
- ad -