「border-spacing」は、隣接するセルのボーダーの間隔を指定します。
「border-collapse」に、separateが指定の時のみ有効です。
CSS Ver. | 適用要素 | 継承 |
---|---|---|
2.1 | <table> | する |
構文 | |
---|---|
border-spacing : length ; |
1個~2個までスペースで区切って指定可能。負の値は指定不可。 1個指定は、4辺(上下左右)全てに同じ値になります。 2個指定は、1個目が左右、2個目が上下の値になります。 |
プロパティ/設定値 | 意味 |
border-spacing : 10px; border-spacing : 5em; |
間隔を値で指定 「長さ・大きさの単位」参照 |
デフォルト:「タグ毎のスタイル初期値」を参照 |
<style type="text/css">
.common div{
font-family : "メイリオ", sans-serif;
width : 290px;
border : 2px solid #6495ed;
background : #e7e7ff;
padding : 10px;
}
div.cssTitle {
margin-top : 10px;
background : #6495ed;
color : #fff;
font-weight : bold;
}
.css_border_spacing_1 {
border-collapse:separate;
border-spacing:10px;
border: solid 1px #000000; }
.css_border_collapse_collapse td{ border: solid 1px #ff0000;}
.css_border_spacing_2 {
border-collapse:separate;
border-spacing:1em 2em;
border: solid 1px #000000; }
.css_border_collapse_separate td{ border: solid 1px #ff0000;}
</style>
<!-- html -->
<div class="common">
<div class="cssTitle">border-spacing:10px</div>
<div>
<table class="css_border_spacing_1">
<tbody>
<tr><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td></tr>
</tbody>
</table>
</div>
<div class="cssTitle">border-spacing:1em 2em</div>
<div>
<table class="css_border_spacing_2">
<tbody>
<tr><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td></tr>
</tbody>
</table>
</div>
</div>
1-1 | 1-2 | 1-3 | 1-4 |
2-1 | 2-2 | 2-3 | 2-4 |
3-1 | 3-2 | 3-3 | 3-4 |
1-1 | 1-2 | 1-3 | 1-4 |
2-1 | 2-2 | 2-3 | 2-4 |
3-1 | 3-2 | 3-3 | 3-4 |
関連するCSS(STYLE) | |
---|---|
border | 罫線の設定 |
border-bottom | 罫線の底辺の設定 |
border-bottom-color | 罫線の底辺の色設定 |
border-bottom-left-radius | 左下の角丸 |
border-bottom-right-radius | 右下の角丸 |
border-bottom-style | 罫線の底辺のスタイル設定 |
border-bottom-width | 罫線の底辺の太さ設定 |
border-collapse | テーブルの罫線の表示方法 |
border-color | 罫線の色設定 |
border-left | 罫線の左辺の設定 |
border-left-color | 罫線の左辺の色設定 |
border-left-style | 罫線の左辺のスタイル設定 |
border-left-width | 罫線の左辺の太さ設定 |
border-radius | 角丸の設定 |
border-right | 罫線の右辺の設定 |
border-right-color | 罫線の右辺の色設定 |
border-right-style | 罫線の右辺のスタイル設定 |
border-right-width | 罫線の右辺の太さ設定 |
border-style | 罫線のスタイル設定 |
border-top | 罫線の上辺の設定 |
border-top-color | 罫線の上辺の色設定 |
border-top-left-radius | 左上の角丸 |
border-top-right-radius | 右上の角丸 |
column-rule-width | マルチカラムの区切り線の太さ |
border-top-width | 罫線の上辺の太さ設定 |
border-width | 罫線の太さ設定 |
border-collapse | テーブルの罫線の表示方法 |
caption-side | テーブルのキャプションの表示位置 |
empty-cells | 空セルの表示 |
table-layout | テーブルの表示方法 |
border-image | 画像を使った罫線の表示 |
border-image-outset | ボーダーイメージエリアを広げる |
border-image-repeat | 画像ボーダーの繰り返し方法 |
border-image-slice | 画像のボーダー使用範囲 |
border-image-source | ボーダーの使用画像ファイル |
border-image-width | 画像ボーダーの太さ |
関連するHTMLタグ | |
---|---|
table | 表 |