border-spacing
CSS の border-spacing
プロパティは、 <table>
における隣り合うセルの枠線同士の間隔を定めます。このプロパティは border-collapse
が separate
のときのみ適用されます。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
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>
- 固定値による間隔の大きさです。
形式文法
例
この例では表のセル間において、垂直方向に .5em
、水平方向に 1em
の間隔を適用します。なお、外の辺においては、表の padding
の値が border-spacing
の値に追加されます。
HTML
<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
</table>
CSS
table {
border-spacing: 1em .5em;
padding: 0 2em 1em 0;
border: 1px solid orange;
}
td {
width: 1.5em;
height: 1.5em;
background: #d2d2d2;
text-align: center;
vertical-align: middle;
}
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Level 2 (Revision 1) border-spacing の定義 |
勧告 | 初回定義 |
初期値 | 0 |
---|---|
適用対象 | table および inline-table 要素 |
継承 | あり |
計算値 | 2つの絶対的な長さ |
アニメーションの種類 | 離散値 |
ブラウザーの対応
BCD tables only load in the browser
関連情報
border-collapse
,border-style
border-spacing
プロパティは HTML の<table>
要素の出現方法を変更します。