ie8のcssでcol要素のwidthがきかない

質問

ie7でうまく表示しているソースで、先日ie8にアップグレードし表示を確認しましたら、セルの幅の設定がうまくいかず、すべてのセルの幅が同じ長さ(省略値?)になっていました。
いろいろと確認して行くと、どうもcol要素のcssのwidthが無視されているようでした。
cssはまだ勉強し始めたばかりで詳しくありません。cell11,cell12の中にwidthを指定すればwidthは有効のようです。
どなたか、どこを修正すれば直るか教えてください。ソースは以下の通りです。
-------------------------------------------
htmlのソース
<table class="table2">
<col class="col41">
<col class="col42">
<col class="col51">
<col class="col52">
<col class="col41">
<col class="col42">
<col class="col51">
<col class="col52">
<tr>
<th class="cell12" colspan="2" align="center" nowrap>３月</th>
<th class="cell12" colspan="2" align="center" nowrap>４月</th>
<th class="cell12" colspan="2" align="center" nowrap>５月</th>
<th class="cell12" colspan="2" align="center" nowrap>６月</th>
</tr>
<tr>
<th class="cell11" nowrap>点数</th>
<th class="cell11" nowrap>金額</th>
<th class="cell11" nowrap>点数</th>
<th class="cell11" nowrap>金額</th>
<th class="cell11" nowrap>点数</th>
<th class="cell11" nowrap>金額</th>
<th class="cell11" nowrap>点数</th>
<th class="cell11" nowrap>金額</th>
</tr>
<tr>
<td class="cell12" nowrap>100</td>
<td class="cell12" nowrap>200,000</td>
<td class="cell12" nowrap>50</td>
<td class="cell12" nowrap>100,000</td>
<td class="cell12" nowrap></td>
<td class="cell12" nowrap></td>
<td class="cell12" nowrap></td>
<td class="cell12" nowrap></td>
</tr>
</table>
-----------------------------------------
cssのソース
.table2 {
border : 0px solid black ;
border-collapse: collapse ;
margin: 0px;
padding: 0px;
}

.col41 { /* 緑 各月 点数 */
text-align: right;
width: 50px;
background-color: #e0ffff ;
}

.col42 { /* 緑 各月 金額 */
text-align: right;
width: 80px;
background-color: #e0ffff ;
}

.col51 { /* 白 各月 点数 */
text-align: right;
width: 50px;
background-color: #ffffff ;
}

.col52 { /* 白 各月 金額 */
text-align: right;
width: 80px;
background-color: #ffffff ;
}

.cell11 {
border-right : 1px solid silver ;
border-bottom: 1px solid black ;
}

.cell12 {
border-right : 1px solid silver ;
border-bottom: 1px solid silver ;
}

よろしくお願いします。

回答No.1

no4nejp · ベストアンサー

私の環境で色々と試してみたところ問題を理解できました。
（最初、早とちりして変な回答をしてしまうところでした（汗）

今回の問題の原因は以下にあります。

１、IE7からIE8にかけて変化した部分
２、col要素（colgroup要素）へのwidthスタイル指定の意味

まずは後者から解説します。
本来、col要素へのwidthスタイル指定の意味は、
『列の最小幅の指定』であります。
『列の厳密な幅の指定』ではありません。（情報元：Web標準の教科書）
すなわち、
・セルの内容物がwidthで指定した幅を超えている
・テーブル全体の幅がブラウザ表示域に比べて小さい（つまりテーブルが横に広がるだけのスペースが残っている）
この2つの条件が同時に満たされた時、列の幅はcol要素のwidthで指定した幅よりも大きくなります。

ただし、これはcssの仕様書に沿ってきちんと作られたWebブラウザでの場合です。
IEではcssの仕様を守っていない箇所がいくつもあります。cssを勉強し始めたばかりだと言えど、もしかしたらご存知ではないでしょうか。

ここで前者の問題点が関係してきます。
IE7ではcol要素にwidthを指定した場合、きちんと厳密に列がその幅になりました（私の環境でも確認しました）。
しかし、IE8では内容物に対し柔軟に幅が変わるようになっています（つまり上に挙げたcssの仕様に即した挙動をしています）。
すなわち、IE7からIE8にかけて、どちらかと言えばcssの仕様に従うようにソフトウェアが改善されたということになります。

以上を踏まえて問題の核心である『全ての列が同じ幅になる』点を考察しますと、
恐らく、

・質問内容に載っていない部分のcssにより、セル内の文字の横幅が80px以上になっていて、IE8では全ての列の幅が最小幅（50px,80px）に収まらず、80px以上になっている

のではないかと思われます。

修正手段としては、やはり一つ一つのセルにクラス指定をするほかないかと考えます。
table要素のスタイル指定に関しましては、今回の問題のようににっちもさっちもいかない場合があり、大変に難しいです。
特に幅を綺麗に指定したいのに面倒くさい方法しかないというのは、cssの問題の一つだと考えます。
このあたりの問題はHTML5で解決されていると良いのですが……

また、col要素について記述されたサイトを参考サイトとして挙げておきます。サイトで言われているとおり、col要素は子要素を持たないゆえの制限が幾つかあります。

参考URL：

http://blog.btmup.com/xhtml/col-colgroup-css.html

お礼

詳しい解説ありがとうございました。やはりセル１つ１つについてclassを設定するしかないのですね。
セル幅に関しては大きな幅を指定しても表示は変わらず、参考URL内で解説してあるように、「colでは、width,backgroud-*のみ有効」というようには行かなかった(私の解釈が悪い?)のです。
ただ、この参考URLではcol,colgroupについての解説しっかりしてありよくわかりました。
ありがとうございました。