- ベストアンサー
テーブルレイアウト
テーブルレイアウトで困っています。 <table width="100%" height="100%" border="1"> <tr> <td colspan="2" valign="top" height="100">全体の幅は100％</td> </tr> <tr> <td width="150" valign="top">左のセル<br>幅150</td> <td valign="top">右のセル<br>幅指定なし</td> </tr> </table> これだと問題なく表示されるのですが、 <table width="100%" height="100%" border="1"> <tr> <td colspan="2" valign="top" height="100">全体の幅は100％ 少し長い文章を入れる</td> </tr> <tr> <td width="150" valign="top">左のセル<br>幅150</td> <td valign="top">右のセル<br>幅指定なし</td> </tr> </table> このように１列目のセルに長い文章を入れると、２列目の左のセルの幅が勝手に広がってしまいます。 何が原因で、対処法はないでしょうか？ Netscape7.1ではこうならないんですが、IE6では勝手に崩れてしまいます。 よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
最近はこうするそうです。 私も今回はじめてしりました <table height="100%" width="100%" border="1"> <COLGROUP width="150"> <COLGROUP width="*"> <tr> <td colspan="2" valign="top" height="100">全体の幅は100％ 少し長い文章を入れる</td> </tr> <tr id="x" > <td valign="top" >左のセル<br>幅150</td> <td valign="top">右のセル<br>幅指定なし</td> </tr> </table>
その他の回答 (2)
spacer.gifを使って左のセルを150pxに固定する方法はいかがでしょうか。 <table width="100%" height="100%" border="1"> <tr> <td colspan="2" valign="top" height="100">全体の幅は100％ 少し長い文章を入れる</td> </tr> <tr> <td width="1%" valign="top"><img src="spacer.gif" width="150" height="1"></td> <td valign="top" width="99%">右のセル<br> 幅指定なし</td> </tr> </table>
お礼
一応幅150pxの画像を入れる方法はやってみましたが、ダメでした。 いただいた回答はこれから役立てたいと思います。 ありがとうございます。
- gold-tare
- ベストアンサー率33% (1/3)
IEの処理命令ですと、 「ブラウザのサイズに合わせて100%」→この条件がかなわなかった場合に 「文字長にあわせて100%」と気を利かせた条件変更をしてくれるとお考えいただければ。 ・widthをピクセル指定で固定してしまう。 ・100%にしても、余白ができますね？ ここでマージンを埋めてしまい、その分テーブルのサイズに余裕を持たせる方法もございます。 BODYタグを <body leftmargin="0" topmargin="0"> 以上のように設定していただければOKです。 的をついた答えができませんでしたが、参考のほど<(_ _)>
お礼
IEでの処理命令の過程でそうなってしまうんですね。 勉強になりました。 サイドの余白は「丁度いいかな」と思って放置してましたが、埋めてしまうのも手ですね。 ありがとうございました。
お礼
<colgroup>ですか、なるほど！ 考えてもみませんでした。 スッキリ解消です。 ありがとうございました。