サイト内検索
...スタイルシート(css)...
スタイルシート・table
境界線の間隔
- 境界線の間隔は、border-spacingプロパティを指定します。
- table要素のみに適用されます。
- 境界線の表示方法(border-collapseプロパティ)が
- 間隔をあけての表示(separate)の指定されている場合に適用されます。
- border-collapse: separate;
- [使い方]
- table{
border-spacing: 20px;
} - [メモ]
- IE6・IE7では、未対応です。
プロパティ名 | 値 | 説明 |
---|---|---|
border-spacing: | ; |
上・下・左・右を指定します。
「数値+単位」(例・・100px)を指定します。 単位は、「px」または「%」を指定します。 |
border-spacing: | ; |
左右・上下を指定します。
数値は半角にスペースで区切ります。 「数値+単位」(例・・10px 20px)を指定します。 単位は、「px」または「%」を指定します。 |
---|
サンプル
[headの中]
<style type="text/css"><!--
table{
border: 2px #999999 solid;
margin-bottom: 10px;
border-collapse: separate;
}
.sample1{
border-spacing: 20px;
}
.sample2{
border-spacing: 40px 30px;
}
th,td{
border: 2px #999999 solid;
}
-->
</style>
[bodyの中]
<table class="sample1"><tr>
<th>No1</th>
<th>No2</th>
</tr>
<tr>
<td>No3</td>
<td>No4</td>
</tr>
</table>
<table class="sample2">
<tr>
<th>No1</th>
<th>No2</th>
</tr>
<tr>
<td>No3</td>
<td>No4</td>
</tr>
</table>
[ブラウザ上]
No1 | No2 |
---|---|
No3 | No4 |
No1 | No2 |
---|---|
No3 | No4 |