テーブルのレイアウトがおかしくなります・・・

質問

先ほども質問して教えていただいたのですが、少し対応できないことが出来てしまったので
再び質問いたします。

<table border="1" width="100%">
<tr>
<td width="20" rowspan="2">1</td>
<td width="30">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;aaaaaaaaaaaaaaaaaaaaaa</td>
</tr>
</table>

1)先ほどtable-layout:fixedを教えてもらったのですが、一番左のセルの番号の桁数が増えた場合には幅を増やして表示したい
（つまり最大の幅にしたい）
2)width=30の部分を書かないとcolspanのセルに影響を受けないのですが、width=30を書くととたんにcolspanのセルに影響されて
びよ～んと幅が大きくなってしまいます。ずばりhtmlのバグでしょうか？

よろしくお願いいたします。

回答No.3

moon_night · ベストアンサー

現象確認しました。
バグのような気もしますね・・・

とりあえず％で全て指定すれば大丈夫のようです。
ただ、％だと、見る環境によって多少レイアウトが違って見えますが。

<table border="1" width="100%">
<tr>
<td width="1%" rowspan="2">123</td>
<td width="5%">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;aaaaaaaaaaaaaaa</td>
</tr>

IEしか確認してないので、他のブラウザは崩れるかもしれません。

お礼

ご返答ありがとうございます。
おっしゃるとおり％指定のテーブルに対してピクセル指定でTDのサイズを指定したりすると変になるみたいです。
実はもともとそのように成っていて、私が改造しているのですが、
よくよく見ると今までも変だったようです。変なまま惰性で運用していたみたいです。
というわけでなんとなく納得はいかないのですが、
左端の番号を振るセルは1%にして、何とかいいだろう、ということになりました。

ありがとうございました。

回答No.4

Kuppycat

htmlのバグというよりは、性質の問題かな。
英文を変なところで改行されないようになっているためです。
↓参考に
http://okwave.jp/kotaeru.php3?q=1691445

参考URL：

http://okwave.jp/kotaeru.php3?q=1691445

お礼

そうなんですね。

うーん、でもなんとなく納得行かないような気がしますね・・・

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

回答No.2

kazuhisa01

前回の質問内容がわからないため、こんな感じかなって回答しか出来ませんが参考になればと思います。

<TABLE BORDER=1 width="100%">
<COLGROUP>
<COL width="20">
<COL width="30">
<COL width="*">
</COLGROUP>
　<TR><TH ROWSPAN=3>見出し</TH><TD>データ</TD><TD>データ</TD></TR>
　<TR><TH COLSPAN=2>データ</TH></TR>
　<TR><TD>データ</TD><TD>データ</TD></TR>
</TABLE>

これがazicyanさんの希望の形になるかわかりませんが、使用してみて下さい。

補足

COLGROUPと言うのを知らなかったので、もしやこれで、と思ったのですが、
やはり変です。
　<TR><Td COLSPAN=2>データ</Td></TR>
の行を
　<TR><Td COLSPAN=2>データaaaaaaaaaaaaaaa</Td></TR>
としてみてください。
なぜか左上の「データ」の部分が伸びていきます（幅が広がる）

以前の質問です
http://okwave.jp/kotaeru.php3?q=2001583

どうかよろしくお願いします。

回答No.1

moon_night

質問文の意図を読み取れませんでした。

1)どこの幅を増やして、どこを最大の幅にしたいのですか？
最大とはブラウザの最大幅と言うことですか？

2)colspanセルに影響を受けないと言う意味が良く分かりません。

tableにwidth="100%"としているので、各セルも％で指定してみてはいかがでしょうか。

補足

スイマセン。
続けての質問だったためにだいぶはしょってしまいました。

もしお詳しい方なのならばどうか試して欲しいのですが、
<table border="1" width="100%">
<tr>
<td width="20" rowspan="2">1</td>
<td width="30">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</table>

これをブラウザで出してみてください。
ここで
<td colspan="2">&nbsp;</td>
の行を
<td colspan="2">&nbsp;aaaaaaaaaaaaaaaaaaaaaa</td>
として再びブラウザで見てください。
するとwidthで20と指定したセルがびよーーんと伸びます。

次にこのwidth=20を消します。
すると、均等になります。

width=20を書くと下のセルでcolspanをしなかった場合のセルサイズに
伸びてしまいます。
「colspanのセルに影響されてびよ～んと幅が大きくなってしまいます。」

とはそういういみです。
上のセルを20にするにはどうすればいいのでしょうか。