セルボーダーの間隔のレンダリング

 
テーブル(表)
ホーム > CSS2 Note > border-spacing > セルボーダーの間隔のレンダリング

間隔に1つの値(上下左右)

間隔に1つの値　 Firefox3のサンプル画像
<style type="text/css"><!--
.eg1 {border-spacing:10px;}
.eg1 th {
  border:1px solid #666;
  padding:6px;
}
.eg1 td {
  border:1px solid #666;
  padding:6px;
}
--></style>

<table border="0" class="eg1">
<thead>
<tr><th>ヘッダ</th><th>ヘッダ</th><th>データ</th></tr>
</thead>
<tbody>
<tr><td>データ</td><td>データ</td><td>データ</td></tr>
<tr><td>データ</td><td>データ</td><td>データ</td></tr>
</tbody>
</table>
ie8- ff1- op4- sf1- gc1-は対応しています。
 

間隔に2つの値(左右 上下)

間隔に2つの値　 Firefox3のサンプル画像
<style type="text/css"><!--
.eg1 {border-spacing:20px 10px;}
.eg1 th {
  border:1px solid #666;
  padding:6px;
}
.eg1 td {
  border:1px solid #666;
  padding:6px;
}
--></style>

<table border="0" class="eg1">
<thead>
<tr><th>ヘッダ</th><th>ヘッダ</th><th>データ</th></tr>
</thead>
<tbody>
<tr><td>データ</td><td>データ</td><td>データ</td></tr>
<tr><td>データ</td><td>データ</td><td>データ</td></tr>
</tbody>
</table>
ie8- ff1- op4- sf1- gc1-は対応しています。
 
関連項目: border-spacing
トップページ CSS2 Note ページトップ
 2009/07/01発行 2009/07/01更新