border-spacing

概要

CSS の border-spacing プロパティは、隣り合うセルのボーダー同士の距離を決めます(separate 形式のボーダー専用)。このプロパティは 表象的 HTML (presentational HTML) の属性 cellspacing に相当しますが、オプションの2番めの値を使うと縦横で別の距離を指定できます。

border-spacing 値が表の外周に沿って使われる場合、表のボーダーと最初/最後の列または行にあるセルとの距離は、縦横いずれか適当な側の border-spacing と、表の適当な側(上下左右のいずれか)のパディングの合計になります。

このプロパティは border-collapseseparate のときのみ適用されます。

  • 初期値 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 値構文でのみ使えます。
horizontal
横方向の隣接セル間の距離を示す <length> 値で、隣接する列間の距離になります。 2 値構文でのみ使えます。
vertical
縦方向の隣接セル間の距離を示す <length> 値で、隣接する行間の距離になります。 2 値構文でのみ使えます。
inherit
親要素の border-spacing の計算値を使うことを示すキーワードです。

実際の表示を確認

table { border-spacing: 10px 5px; }

仕様書

仕様書 策定状況 コメント
CSS Level 2 (Revision 1) 勧告  

ブラウザ実装状況

機能 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) ? ? ?

関連情報

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank
最終更新者: ethertank,
サイドバーを隠す