セルボーダーの表示形式のレンダリング

 
テーブル(表)
ホーム > CSS2 Note > border-collapse > セルボーダーの表示形式のレンダリング

collapse: solid(実線)

<style type="text/css"><!--
.eg1 {border-collapse:collapse;}  /* 隣り合うボーダーを重ねて表示 */
.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>
 

collapse: ボーダーの種類

dotted　 dashed　 solid　 double　 groove　 ridge　 inset　 outset　 none　 hidden
<style type="text/css"><!--
.eg1 {border-collapse:collapse;}  /* 隣り合うボーダーを重ねて表示 */
.eg1 th {
  border:3px dotted #666;
  padding:6px;
}
.eg1 td {
  border:3px dotted #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>
*1 CSS2, CSS2.1の仕様では、insetは、「border-collapse:collapse」の場合「ridge」と同じ表示になり、outsetは、「border-collapse:collapse」の場合「groove」と同じ表示になります。
 

separate: solid(実線)

<style type="text/css"><!--
.eg1 {border-collapse:separate;}  /* 隣り合うボーダーを分けて表示 */
.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>
 

separate: ボーダーの種類

dotted　 dashed　 solid　 double　 groove　 ridge　 inset　 outset　 none　 hidden
<style type="text/css"><!--
.eg1 {border-collapse:separate;}  /* 隣り合うボーダーを分けて表示 */
.eg1 th {
  border:3px dotted #666;
  padding:6px;
}
.eg1 td {
  border:3px dotted #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>
 

collapse: border-style:hidden;

collapse: border-sytle:hidden;　 Firefox3のサンプル画像
<style type="text/css"><!--
.eg1 {border-collapse:collapse;}
.eg1 th {
  border:8px solid #9cf;
  padding:6px;
}
.eg1 td {
  border:8px solid #9cf;
  padding:6px;
}
.eg1 .hdn {border-style:hidden;}
--></style>

<table class="eg1">
<tbody>
<tr><td>データ</td><td>データ</td><td>データ</td></tr>
<tr><td>データ</td><td class="hdn">データ</td><td>データ</td></tr>
<tr><td>データ</td><td>データ</td><td>データ</td></tr>
</tbody>
</table>
ieは未対応。N7- o3- ff1- sf1- gc1-は対応しています。
 
関連項目: border-collapse
トップページ CSS2 Note ページトップ
 2009/07/01発行 2009/09/01更新