border-spacing 【セルのボーダーの間隔を指定する】
[Fx1] [Fx2] [Op6] [Op7] [Ns7]
border-spacingプロパティは、table(表)のセルに対して、セル周囲に指定されたボーダーと、隣接するセルのボーダーの間隔を指定する際に使用します。border-spacingプロパティは、border-collapseプロパティの値がseparateのときに有効になります。
Internet Explorerではサポートされていないのでcellspacing属性を代わりに使用します。
数値で指定する
・四辺を一括で指定する
border-spacing: 10px;
・上下・左右と分けて指定する
border-spacing: 10px 20px;
border-spacingの使用例
CSSファイル
.sample001 {
border-collapse: separate;
border-spacing: 15px;
border: 1px solid #cccccc;
margin: 10px;
}
.sample001 td {
border: 1px solid #0066ff;
}
HTMLソース
<table class="sample001">
<caption>border-spacing : 15px</caption>
<tr>
<td>border-spacing </td><td>セルのボーダー間隔 </td><td>分離ボーダーモデルのみ </td></tr>
<tr>
<td>border-spacing </td><td>セルのボーダー間隔 </td><td>分離ボーダーモデルのみ </td></tr>
<tr>
<td>border-spacing </td><td>セルのボーダー間隔 </td><td>分離ボーダーモデルのみ </td></tr>
</table>
<table class="sample001" cellspacing="15px">
<caption>IE対応策 cellspacing15px</caption>
<tr>
<td>cellspacing </td><td>セルのボーダー間隔 </td><td>分離ボーダーモデルのみ </td></tr>
<tr>
<td>cellspacing </td><td>セルのボーダー間隔 </td><td>分離ボーダーモデルのみ </td></tr>
<tr>
<td>cellspacing </td><td>セルのボーダー間隔 </td><td>分離ボーダーモデルのみ </td></tr>
</table>
表示すると
| border-spacing | セルのボーダー間隔 | 分離ボーダーモデルのみ |
| border-spacing | セルのボーダー間隔 | 分離ボーダーモデルのみ |
| border-spacing | セルのボーダー間隔 | 分離ボーダーモデルのみ |
| cellspacing | セルのボーダー間隔 | 分離ボーダーモデルのみ |
| cellspacing | セルのボーダー間隔 | 分離ボーダーモデルのみ |
| cellspacing | セルのボーダー間隔 | 分離ボーダーモデルのみ |
テーブル(表)関連項目
| table-layout | テーブル(表)の表示方法を指定する |
| caption-side | テーブル(表)のキャプションの位置を指定する |
| border-collapse | セルのボーダーの表示の仕方を指定する |
| border-spacing | セルのボーダーの間隔を指定する |
| empty-cells | 空白セルのボーダーの表示・非表示を指定する |
