- ベストアンサー
IE8でcol要素のwidthが効かない
- IE7で正常に表示されているソースコードをIE8にアップグレードした結果、col要素の幅の設定が正常に動作せず、全てのセルの幅が同じになってしまいました。
- 初めてCSSを勉強し始めたばかりで、詳しい知識はありません。ただ、cell11とcell12の中にwidthを指定すれば幅が有効になるようです。
- どこを修正すれば問題が解消するかわかる方、教えてください。以下がHTMLとCSSのソースコードです。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
私の環境で色々と試してみたところ問題を理解できました。 （最初、早とちりして変な回答をしてしまうところでした（汗） 今回の問題の原因は以下にあります。 １、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要素は子要素を持たないゆえの制限が幾つかあります。
お礼
詳しい解説ありがとうございました。やはりセル１つ１つについてclassを設定するしかないのですね。 セル幅に関しては大きな幅を指定しても表示は変わらず、参考URL内で解説してあるように、「colでは、width,backgroud-*のみ有効」というようには行かなかった(私の解釈が悪い?)のです。 ただ、この参考URLではcol,colgroupについての解説しっかりしてありよくわかりました。 ありがとうございました。