サイト内検索

...スタイルシート(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>No</th>
<th>No</th>
</tr>
<tr>
<td>No</td>
<td>No</td>
</tr>
</table>
<table class="sample2">
<tr>
<th>No</th>
<th>No</th>
</tr>
<tr>
<td>No</td>
<td>No</td>
</tr>
</table>

[ブラウザ上]

NoNo
NoNo
NoNo
NoNo

Copyright c 2007.10.01 luc All rights reserved.