We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CSS の border-spacing プロパティは、 <table> における隣り合うセルの枠線同士の間隔を定めます。このプロパティは border-collapseseparate のときのみ適用されます。

border-spacing の値は、表の外周部分にも使用され、表の境界線と最初/最後の列または行との間の距離は、(縦または横の)対応する border-spacing と、表の対応する側(上下左右のいずれか)の padding の合計になります。

メモ: border-spacing プロパティは、 <table> 要素の非推奨になった cellspacing 属性と同等ですが、任意で2つ目の値を指定して、左右方向と上下方向に異なる間隔を設定することができる点が異なります。

構文

/* <length> */
border-spacing: 2px;

/* 左右の <length> | 上下の <length> */
border-spacing: 1cm 2em;

/* グローバル値 */
border-spacing: inherit;
border-spacing: initial;
border-spacing: unset;

border-spacing プロパティは1つまたは2つの値で指定することができます。

  • <length> 値が1つ指定された場合は、セル間の左右方向と上下方向の両方の間隔を定義します。
  • <length> 値が2つ指定された場合は、最初の値がセル間の左右方向の間隔(つまり、隣り合うの間隔)を定義し、2番目の値がセル間の上下方向の間隔(つまり、隣り合うの間隔)を定義します。

<length>
固定値による間隔の大きさです。

形式文法

<length> <length>?

CSS

table {
  border-spacing: 5px 12px;
  padding: 0 8px 8px 0;
  border: 1px solid orange;
}

td {
  width: 20px;
  height: 20px;
  border: 1px solid blue;
  text-align: center;
}

結果

仕様策定状況

仕様書 策定状況 コメント
CSS Level 2 (Revision 1)
border-spacing の定義
勧告 初回定義。

初期値0
適用対象table および inline-table 要素
継承継承する
メディアvisual
計算値two absolute lengths
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1121841
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? ? あり4 ? ? ?

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, SphinxKnight, Prinz_Rana, fscholz, Sebastianz, ethertank, sosleepy
最終更新者: mfuji09,