概要
CSS の border-spacing
プロパティは、隣り合うセルのボーダー同士の距離を決めます(separate 形式のボーダー専用)。このプロパティは 表象的 HTML (presentational HTML) の属性 cellspacing
に相当しますが、オプションの2番めの値を使うと縦横で別の距離を指定できます。
border-spacing
値が表の外周に沿って使われる場合、表のボーダーと最初/最後の列または行にあるセルとの距離は、縦横いずれか適当な側の border-spacing
と、表の適当な側(上下左右のいずれか)のパディングの合計になります。
このプロパティは border-collapse
が separate
のときのみ適用されます。
初期値 | 0 |
---|---|
適用対象 | table および inline-table 要素 |
継承 | 継承する |
メディア | visual |
計算値 | two absolute lengths |
アニメーションの可否 | 不可 |
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
Formal syntax: <length> <length>?
border-spacing: length /* 1 値構文 */ border-spacing: horizontal vertical /* 2 値構文 */ border-spacing: inherit
値
- length
- 縦横両方向のセル間距離を示す
<length>
値です。 1 値構文でのみ使えます。</length> - horizontal
- 横方向の隣接セル間の距離を示す
<length>
値で、隣接する列間の距離になります。 2 値構文でのみ使えます。</length> - vertical
- 縦方向の隣接セル間の距離を示す
<length>
値で、隣接する行間の距離になります。 2 値構文でのみ使えます。</length> inherit
- 親要素の
border-spacing
の計算値を使うことを示すキーワードです。
例
table { border-spacing: 10px 5px; }
仕様書
仕様書 | 策定状況 | コメント |
---|---|---|
CSS Level 2 (Revision 1) border-spacing の定義 |
勧告 |
ブラウザ実装状況
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
基本サポート | 1.0 | 1.0 (1.7 or earlier) | 8.0 | 4.0 | 1.0 (85) |
機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基本サポート | ? | 1.0 (1.9.2) | ? | ? | ? |