border-spacingプロパティ

TOPページに戻る > CSS

border-spacingプロパティ

table要素のセルの間隔を指定できます
左右、上下の間隔を別々に指定できます
border-collapseプロパティの値がseparateになっていないと、border-spacingプロパティが使えません
※border-spacingプロパティはIE6、IE7が未対応です。IE8から対応しています

使い方（書式）

セレクタ { border-spacing: 値; }                                    

border-spacingプロパティ

対応ブラウザ
適用できる要素	table要素
子要素へのスタイルの継承	する

プロパティの値	説明
単位	px、emなどの単位、値が1つの場合は、上下左右のセルの間隔をまとめて指定します。値が2つの場合は、左右、上下の間隔を個別に指定できる

実際の指定方法

.hoge { border-spacing: 10px; }   /* セルの間隔をまとめて指定 */

.hoge2 { border-spacing: 5px 20px; }  /* 左右が5px、上下が20pxの間隔に指定 */

html部分

<table class="hoge">
<tr>
<td>border-spacing: 10px;</td>
<td>セルの間隔をまとめて指定</td>
</tr>
<tr>
<td>border-spacing: 10px;</td>
<td>セルの間隔をまとめて指定</td>
</tr>
</table>

<p>実際の表示 セルの間隔を左右、上下で指定</p>
<table class="hoge2">
<tr>
<td>border-spacing: 5px 20px;</td>
<td>左右が5px、上下が20pxの間隔に指定</td>
</tr>
<tr>
<td>border-spacing: 5px 20px;</td>
<td>左右が5px、上下が20pxの間隔に指定</td>
</tr>
</table>

実際の表示 セルの間隔をまとめて指定

border-spacing: 10px;	セルの間隔をまとめて指定
border-spacing: 10px;	セルの間隔をまとめて指定

実際の表示 セルの間隔を左右、上下で指定

border-spacing: 5px 20px;	左右が5px、上下が20pxの間隔に指定
border-spacing: 5px 20px;	左右が5px、上下が20pxの間隔に指定