col/colgroup要素へのスタイル指定
トップページ／（関連文書）／col/colgroup要素へのスタイル指定
ここではcol要素やcolgroup要素に対してCSSを設定した場合の、ユーザエージェントによる解釈の違いをまとめています。
- visibilityプロパティの項を更新。Mozilla1.7betaの情報を追加。（2004-03-26）
注意：Windows版Mozilla1.7betaでvisibilityプロパティの項にある例示を閲覧するとMozillaがクラッシュします。3月20日以降のnightlyビルドではクラッシュしないそうです。
はじめに
(X)HTMLにおいて表のセル要素は行要素の子孫です。従ってスタイルシートの各プロパティの値は列要素ではなく行要素から継承します。ただしCSS2では border, background, width, visibility の4種類のプロパティに限りcol要素やcolgroup要素への適用を可としています。
<table border="2">
<colgroup style="width:10em; text-align:center;"></colgroup>
<colgroup><col style="width:10em; color:blue;"></colgroup>
<tr><td>中央揃えではない</td><td>青色ではない</td></tr>
</table>
- WinIE5.x/6.0
- col/colgroup要素から継承するはずのないプロパティが継承する。
- Netscape4.x
- col/colgroup要素を無視する。すべてのスタイルが反映されない。
captionがある表
<table border="2">
<caption>題</caption>
<colgroup style="width:10em;"></colgroup>
<colgroup><col style="background:yellow;"></colgroup>
<tr><td>幅が10em</td><td>背景が黄色</td></tr>
</table>
<table border="2">
<!-- 題なし -->
<colgroup style="width:10em;"></colgroup>
<colgroup><col style="background:yellow;"></colgroup>
<tr><td>幅が10em</td><td>背景が黄色</td></tr>
</table>
- Safari1.x, Konqueror3.1.3
- caption要素がある表ではcol/colgroup要素に指定したスタイルがすべて無視される。
borderプロパティ
<style type="text/css">
td {
border: 1px solid lime;
}
</style>
<table style="border-collapse:collapse; border:2px solid blue;">
<colgroup><col></colgroup>
<colgroup style="border:4px solid red;"></colgroup>
<colgroup><col></colgroup>
<colgroup style="border:4px solid green;"><col></colgroup>
<colgroup><col></colgroup>
<colgroup><col style="border:4px solid fuchsia;"></colgroup>
<colgroup></colgroup>
<colgroup style="border:4px solid red;"></colgroup>
<colgroup></colgroup>
<colgroup style="border:4px solid green;"><col></colgroup>
<colgroup></colgroup>
<colgroup><col style="border:4px solid fuchsia;"></colgroup>
<tr><td>(1)</td><td>(2)</td><td>(3)</td><td>(4)</td><td>(5)</td><td>(6)</td>
<td>(7)</td><td>(8)</td><td>(9)</td><td>(10)</td><td>(11)</td><td>(12)</td></tr>
</table>
| (1) | (2) | (3) | (4) | (5) | (6) | (7) | (8) | (9) | (10) | (11) | (12) |
- WinIE5.x/6.0, Konqueror3.1.3
- 未対応。table要素とtd要素のボーダーだけを枠に使用する。
- Netscape7.1、Mozilla1.7beta
- Opera6.06
- col要素を含まないcolgroup要素を無視し、無視した分だけ列が前に詰まる。赤色のボーダーは設置されず、(3)(6)の列が緑色のボーダー、(5)(7)の列がピンク色のボーダーになる。
- col要素を含むcolgroup要素にプロパティを指定すると左右の縦枠が設置されない。(3)(6)の列の左右の枠は緑色ではない。
- Opera7.23
- col要素を含むcolgroup要素にプロパティを指定すると列の右枠が設置されない。(4)(10)の列の右枠はtd要素のボーダーになる。
backgroundプロパティ
<col style="background:yellow;">
<col style="background:yellow;">
<col span="2" style="background:yellow;">
<colgroup style="background:yellow;"></colgroup>
<colgroup style="background:yellow;"></colgroup>
<colgroup span="2" style="background:yellow;"></colgroup>
<colgroup style="background:yellow;"><col><col></colgroup>
<colgroup style="background:yellow;"><col span="2"></colgroup>
- WinIE5.x/6.0, Opera7.23、Mozilla1.7beta標準モード
- 問題なし。(1)から(6)ですべての列の背景が黄色になる。
- Opera6.06, Netscape7.1、Mozilla1.7互換モード
- 未対応。(1)から(6)ですべての列の背景が透過のまま。
- Konqueror3.1.3
- col要素を含まずspan属性を省いたcolgroup要素での指定を無視する。(3)ですべての列の背景が透過のまま。
widthプロパティ
<col style="width:10em;">
<col style="width:10em;">
<col span="2" style="width:10em;">
<colgroup style="width:10em;"></colgroup>
<colgroup style="width:10em;"></colgroup>
<colgroup span="2" style="width:10em;"></colgroup>
<colgroup style="width:10em;"><col><col></colgroup>
<colgroup style="width:10em;"><col span="2"></colgroup>
<colgroup style="width:10em;"></colgroup>
<colgroup style="width:10em;"><col><col></colgroup>
- WinIE5.x/6.0, Netscape7.1、Mozilla1.7beta
- 問題なし。(1)から(7)のすべての列の幅が指定値どおりになる。
- Opera6.06
- col要素のspan属性を無視する。(2)は1列目しか幅が指定値どおりにならず、2列目以降はauto値相当の幅になる。
- colgroup要素での指定を無視する。(3)から(7)はすべての列がauto値相当の幅になる。
- Opera7.23
- colgroup要素でスタイル、子のcol要素でスタイルを適用する列を指定する方法が無視される。(5)と(6)はすべての列がauto値相当の幅になる。(7)は1列目しか幅が指定値どおりにならない。
- MacIE5.x
- colgroup要素での指定を無視する。(3)から(7)はすべての列がauto値相当の幅になるはず。
- Safari1.2, Konqueror3.1.3
- span属性を含むcol/colgroup要素での指定を無視する。(2)(4)(6)はすべての列がauto値相当の幅になる。
- col要素を含まないcolgroup要素を無視する。(3)はすべての列がauto値相当の幅になる。(7)は1列目と2列目の幅が5em、3列目がauto値相当の幅になる。
Mozilla1.7betaでここから先を閲覧しないで下さい。Mozillaがクラッシュします！
visibilityプロパティ
<table border="2">
<colgroup></colgroup>
<colgroup style="visibility:collapse;"></colgroup>
<colgroup></colgroup>
<tr><td>見える</td><td>見えない</td><td>見える</td></tr>
</table>
<table border="2">
<col>
<col style="visibility:collapse;">
<col>
<tr><td>見える</td><td>見えない</td><td>見える</td></tr>
</table>
- Netscape7.1
問題なし。2列目は表示されない。ただし、ページの上端を表示した状態で閲覧領域内に見えない表に限る。従って、ページの先頭に近い位置にある表ではこのプロパティが効かない場合がある。
- WinIE5.x/6.0, Opera6.06/7.23, Konqueror3.1.3
- Mozilla1.7beta
- col/colgroup要素に
visibility:collapse; を指定した表を描画する時点でクラッシュする。
トップページ／（関連文書）／col/colgroup要素へのスタイル指定