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>3月</th>
<th class="cell12" colspan="2" align="center" nowrap>4月</th>
<th class="cell12" colspan="2" align="center" nowrap>5月</th>
<th class="cell12" colspan="2" align="center" nowrap>6月</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ベストアンサー
- 回答日時:
私の環境で色々と試してみたところ問題を理解できました。
(最初、早とちりして変な回答をしてしまうところでした(汗)
今回の問題の原因は以下にあります。
1、IE7からIE8にかけて変化した部分
2、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
詳しい解説ありがとうございました。やはりセル1つ1つについてclassを設定するしかないのですね。
セル幅に関しては大きな幅を指定しても表示は変わらず、参考URL内で解説してあるように、「colでは、width,backgroud-*のみ有効」というようには行かなかった(私の解釈が悪い?)のです。
ただ、この参考URLではcol,colgroupについての解説しっかりしてありよくわかりました。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
td要素内のdiv要素をセンタリン...
-
表とリスト(ulとtable)の違い...
-
divで囲んだ文字が消える
-
Visual Studio で CLR 開発でデ...
-
tableのヘッダを固定したい
-
Tableタグ内のspan styleが適応...
-
htmlのテーブルタグについて
-
テーブルの一部分のセルだけに...
-
Firefoxを使ってるのですがズー...
-
form要素とtable要素
-
テーブルタグの中にdivを含めて...
-
TABLEのセルの中の文字を行単位...
-
tableにul,または,olを入れられ...
-
ホームページのテキストを折り...
-
【CSS】縦横スクロールテーブル...
-
TRタグの余白をcssで設定するには
-
HTMLのテーブルをExcelにCopy&P...
-
HTMLで文とテーブルの間が空く。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
Tableタグで作成した表の縮小
-
td要素内のdiv要素をセンタリン...
-
Tableタグ内のspan styleが適応...
-
XHTMLに関する質問 順序が逆に...
-
ブラウザによってテーブルのセ...
-
表とリスト(ulとtable)の違い...
-
vbscriptで時計を作りたい
-
formのinputなどの幅100%指定
-
TDタグ内での均等割付の仕方
-
cssで、テーブルのtdの中の文字...
-
センタリングしたページの印刷
-
Firefoxを使ってるのですがズー...
-
divで囲んだ文字が消える
-
Dreamweaver デザインビューの...
-
テーブルの枠線に色が付かない
-
HTMLのテーブルでそれぞれの大...
おすすめ情報