同じwidth=200でもセル内の文字によって幅が違う

質問

まず、大体↓な感じの表を作りました（ファイル１）。

<table width="580">
<th width="60">【Ａ列】</th><th width="320">【Ｂ列】</th><th width="200">【Ｃ列】</th>
<tr><td>Ｄ</td><td>Ｅ</td><td>Ｆ</td></tr>
<tr><td>Ｇ</td><td>Ｈ</td><td>Ｉ</td></tr>
　　　　　・
　　　　　・
　　　　　・
</table>

このHTMLファイルをコピーしてファイル２を作り、
セル内の文字や数値のみ修正し、
随時ブラウザを更新して確認していると、
【Ｃ列】の列幅（200）が広くなったり狭くなったりする現象が起き
（その分【Ｂ列】も変化し、全体的には580のままです）、
結果的に２つのファイルは【Ｃ列】の列幅が違います。

都合上、どちらのファイルも【Ｃ列】の列幅は同じにしたいのですが、
何か良い方法はありますでしょうか。

ちなみに、セル内の文字は【Ｂ列】も【Ｃ列】もオーバー分が折り返されています。
【Ａ列】のみオーバーしないようにしています。

ご回答よろしくお願いします。

回答No.4

yambejp · ベストアンサー

#3に賛成

tableに580をふったら、3列あれば、2列にしか
幅を設定しない。もしくは3列に幅を設定し
テーブルには幅を設定しないのが正しいやりかた
でしょう。矛盾した数値を設定すれば、表示が
ずれるのは仕方ないこと。

あとセルの幅は、colgroupを使うとより確定
しやすいようです
<table>
<colgroup width="60">
<colgroup width="320">
<colgroup width="200">
<tr><th>【Ａ列】</th><th>【Ｂ列】</th><th >【Ｃ列】</th></tr>
・・・</table>

お礼

ご回答ありがとうございます。
勉強不足ですみません・・・
colgroupすごいです。このやり方で解決しました。
皆様ありがとうございました。

回答No.3

chrow

おそらく、ですけれども、borderとspacingの記述がなく、その解釈が時々で異なるからではないか、と思います。

60px、320px、200pxで確かに合計は580pxになりますが、cellspacingとborder分を加えると、
1+1+1+60+1+1+1+320+1+1+1+200+1+1+1
になり、合計で604pxになってしまいます。
ところが、全体で580pxと指定されているため、それを超えた分はブラウザ側が勝手に、セルの幅を狭めることで対応しているのだと思います。
どこのセルを狭めることで対応するかは、完全にブラウザ側のその時々の解釈によりますから、更新したときに変わって見えるのも仕方がないことだと思います。

対応としては、border・cellspacing・ついでにcellpaddingも0pxで指定するというのはどうでしょうか？
少なくともブラウザの解釈の余地がなくなるわけですから、同じものができますし、違うブラウザだと違ってみえる、ということもなくなると思います。
cellpaddingなどは、ブラウザによってセル幅に含めるかどうかの解釈が違うそうですから。

お礼

ご回答ありがとうございます。
確かに580は矛盾してますね。もっと勉強せねばと思いました（汗

回答No.2

noname#16352

多分書き忘れているだけかと思いますが...

<table width="580">
<th width="60">【Ａ列】</th><th width="320">【Ｂ列】</th><th width="200">【Ｃ列】</th>

２行めが <tr>～</tr> で括られていないですよね。
こちらの環境ではセル幅が変動する症状が確認出来なかったので何とも言えませんが、
もし実ソースで<tr>～</tr>を忘れていたら入れてみて下さい。
また、th ではなく td に置き換えた場合はどうなるか検証してみて下さい。

お礼

ご回答ありがとうございます。
すみません。２行目は勘違いでした。確かに<tr></tr>が必要ですね。
<tr></tr>を付けて、pxを付けて、さらに全行全セルにwidthを設定したところ、【Ｃ列】の幅の差はほんのわずかになりました。
でも完全に同じにはなりませんでした。
thをtdに置き換えても変化は見られませんでした。
さらに良い方法をご存知の方がいましたらご回答お願いします。

回答No.1

coursegt

<table width="580">、<th width="60">、<th width="200">とありますが
数値の後にpxをつけてはどうでしょうか？

ex)　<th width="580px">

参考URL：

http://www.tohoho-web.com/css/reference.htm#width

お礼

ご回答ありがとうございます。
pxを付けて、さらに全行全セルにwidthを設定したところ、【Ｃ列】の幅の差はほんのわずかになりました。
でも完全に同じにはなりませんでした。
さらに良い方法をご存知の方がいましたらご回答お願いします。