セルを結合してもCSSで設定した一つ分の幅で表示されます

質問

tableタグを使用して表を作成しており、幅や罫線などの装飾はすべてCSSを使用しています。

質問は、WindowsのIEのみで発生する事象についてです。
colspanで結合しているthタグやtdタグがいくつかあるのですが、それらがCSSのwidthで設定した幅の一つ分で表示されてしまうのです。
FirefoxやSafari、Mac版IEでは発生しません。結合したセルの幅で表示されます（例：widthで100pxを設定し、colspan="3"なら、300pxで表示）。

これはWindows IEのバグでしょうか？
ネット上でかなり探してみましたが、情報は得られませんでした。
解決策・回避策をご存じの方、ご教示ください。

回答No.4

k0021

no3です。
＞このcolタグというものを私は使ったことがなく
使用しないで出来ないことは、　質問しないで下さい
回答に対してたらてトライすることが必要と思います
＞ネット上でかなり探してみましたが、情報は得られませんでした
たしか同一質問に回答していますがどのていどの検索ですか
＞やはり一つ一つのセルにclassを設定することに変わりはなく
一つのセルにclassを設定することにとは、なにゆうのですか

各罫線などの装飾はすべてCSSセル設定しますが回答内容を教えて下さい

＞表組みがこんなものなのかも
tableタグを使用しない場合、no２さんの回答が指摘内容と正しい思います
実際私もtableタグを使用しない場合、使用しています（てにきで使用しています）

回答No.3

k0021

私も使用していますが問題なく表示しています
使用例
<table class="bc_c>
<col span="1" class="w7"><col span="4" class="w2"><col span="1" class="w4"><col span="6" class="w2"><col span="1" class="w4"><tbody>

<td class="dd1 f2" colspan="6">　</td>
<td class="dd1 f2" colspan="3">(前回丑1)</td>

.bc_c {border-collapse:collapse;}
.w2 {width:36px;vertical-align:top;}
.w4 {width:72px;vertical-align:top;}
.w7 {width:126px;vertical-align:top;}
.dd1 {border-bottom:solid black 1px;padding:0 8px 0;}
.f2 {font:14px/120% serif,Times;}

17pxで指定しています
maxの場合は、文字数ｘ17px です
ieとmaxを同一に表示する場合osによりCSSを切り替えて下さい

お礼

ご回答ありがとうございます。

このcolタグというものを私は使ったことがなく、
書籍や雑誌などでも今まで見たことがありません。
（あるかも知れませんが、記憶にありません）

そのため、この方法がどの程度有効なのかすぐには分からないのですが、
やはり一つ一つのセルにclassを設定することに変わりはなく、
後々のメンテを考えると使いづらいというのが実際のところです。
そもそもHTMLでの表組みがこんなものなのかも知れませんね……。

せっかくご提案いただいたのに申し訳ありません。

回答No.2

noname#56882

#1です。
簡単な例で作成してみましたところ、同様の事象が再現されました。
やはりCSSでwidthをひとつひとつ指定しないといけないようです。
（IEでは崩れてしまいましたが、Firefoxでは崩れなかったです）
下記のように指定すると崩れることはないようです。

CSS記述例
.box1{
width: 100px;
background: #cccccc;/*色はわかりやすいようにつけてあります*/
padding: 0.5em;
}
.box2{
width: 300px;
background: #ffff80;/*色はわかりやすいようにつけてあります*/
padding: 0.5em;
}

HTML記述例（テーブル部分のみ）
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="box1">テキスト</td>
<td class="box1">テキスト</td>
<td class="box1">テキスト</td>
</tr>
<tr>
<td colspan="3" class="box2">テキスト</td>
</tr>
</table>

推測で申し訳ないのですか（専門家ではないので）IEの仕様なのかもしれません。

お礼

わざわざサンプルまで作っていただいてすみません……。

やはり一つずつ設定していくしかないんでしょうか。
そうなると、今後修正するときにはかなりの手間がかかりますし、
その分ミスも増えそうですから、
ひとまず「widthを0pxで上書き」で進めておきたいと思います。

回答No.1

noname#56882

念のためにCSSのテーブル部分とHTMLのテーブルタグ表記を書いていただけませんか？
普通にtableだけでcolspan="3"指定するとIEでもきちんと表示されているため
CSS部分に何かあるように思われますので。

もっと詳しい方の回答があるかもしれませんが。

お礼

早速の回答、ありがとうございます。
ただ、ソースについてはなるべく控えたく思っています。
（業務で使用しているということもあり……）

投稿してからも色々と調べてみたのですが、
どうやらwidthを設定した場合にのみ発生する事象のようです。
CSSで設定したその他のプロパティを変更しても、結果には関係ありませんでした。
NymphLuna様の環境でwidthを設定しても、結合したセルの幅で表示されますでしょうか？

widthを設定しなければ発生しないため、現在は結合したセル（th, td）にclassを設定し、widthを0pxに上書きすることで対応しています。
今のところうまくいっているようですが、やはり何か釈然としません。
将来的なトラブルを回避するためにも、引き続き回答をお待ちしています。