XHTML/CSS・トップ | CSSプロパティ・目次

●表とセルの枠線を1本の線にする

 border-collapseは表と見出しセル、データセルなどの枠線を1本の実線で表示させるプロパティです。正確には重ねて表示させるですが、適用させられるのは table要素のみです。1本の実線で表示させるには collapseの値を使いますが、 separateの値を指定すると、セルの枠線が別々に表示されます。border-collapseプロパティはウィンドウ板IE、Nスケープ7以降、オペラ6以降などが対応しています。


【サンプル】↓

指定しない場合
見出しセル 見出しセル 見出しセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル
border-collapse: collapseを指定
見出しセル 見出しセル 見出しセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル

【CSS】↓

table {
 border-collapse: collapse;
}

【解説】↓

 CSS、HTML共に実際のソースは複雑ですが、シンプルに書いてあります。

【HTML】↓

<table border="2">
 <tbody>
  <tr>
   <th>見出しセル</th>
   <th>見出しセル</th>
   <th>見出しセル</th>
  </tr>
  <tr>
   <td>データセル</td>
   <td>データセル</td>
   <td>データセル</td>
  </tr>
  <tr>
   <td>データセル</td>
   <td>データセル</td>
   <td>データセル</td>
  </tr>
  <tr>
   <td>データセル</td>
   <td>データセル</td>
   <td>データセル</td>
  </tr>
  <tr>
   <td>データセル</td>
   <td>データセル</td>
   <td>データセル</td>
  </tr>
 </tbody>
</table>

■border-collapseプロパティの指定が反映されないブラウザのための画像↓

反映されないブラウザのためのサンプル画像

XHTML/CSS・目次 | テーブル(表)・目次

Copyright (C) 2005-2007 http://www.xml.vc/