×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

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 : 15px
border-spacing セルのボーダー間隔 分離ボーダーモデルのみ 
border-spacing セルのボーダー間隔 分離ボーダーモデルのみ 
border-spacing セルのボーダー間隔 分離ボーダーモデルのみ 
IE対応策 cellspacing15px
cellspacing セルのボーダー間隔 分離ボーダーモデルのみ 
cellspacing セルのボーダー間隔 分離ボーダーモデルのみ 
cellspacing セルのボーダー間隔 分離ボーダーモデルのみ 

テーブル(表)関連項目

table-layout テーブル(表)の表示方法を指定する 
caption-side テーブル(表)のキャプションの位置を指定する 
border-collapse セルのボーダーの表示の仕方を指定する 
border-spacing セルのボーダーの間隔を指定する 
empty-cells 空白セルのボーダーの表示・非表示を指定する 

戻る

TOP

WEB SEARCH
MENU
CONTENTS
digilog.TOP
digilog.HTML
digilog.CSS
digilog.SEO
digilog.img