border-spacing

border-spacingプロパティは border-collapseプロパティで表の枠(ボーダー)の表示モデルに分離ボーダーモデル(border-collapse : separate ;)が用いられた場合の各セルのボーダー間隔を指定するプロパティです。table要素の cellspacing属性と同様の機能です。

初期値
0
適用対象
表要素table要素
継承
する
メディア
visual

border-spacingプロパティの値

値は、"em", "px" などの単位識別子を伴う数値の長さで指定し、値を1つだけ指定する場合と値を2つ指定する場合の2種類の指定方法があります。

値を1つだけ指定した場合は、水平・垂直の両方向の枠線の間隔に適用されます。

2つ指定した場合は、「水平方向」「垂直方向」の順に枠線の間隔が適用されます。値を2つ指定する場合は、半角スペースで区切って続けて指定します。

border-spacingプロパティの実装状況

IE
◯:IE8よりサポート
Firefox
Opera
Chrome
Safari
iOS
Android

Internet Explorer 6, 7はborder-spacingプロパティに対応していません。このため、IE6, 7に対してはtable要素の cellspacing属性を指定することでしかセルのボーダー間隔を調節することはできません。

CSS2 仕様における初期値は "0" なのですが、実際の主要視覚ブラウザの初期値は "1px" に設定されているようです。

サンプル

.separate {
border-collapse : separate ;
border-spacing : 5px 10px ;
}
table,th,td {
border : 1px solid #666 ;
}

半角スペース区切りで長さを2つ指定した場合、「水平方向」「垂直方向」の順に枠線の間隔が適用されます。このサンプル(border-spacing : 5px 10px ;)では、水平方向に "5px"、垂直方向に "10px" の枠線の間隔が指定されています。

Updated / Published