Divの幅指定を無視して子テーブルの幅に合わせて全体が伸びてしまいます

締切済

質問者：kingyo16
質問日時：2009/11/25 14:24
回答数：2件

はじめて投稿します。
下のHTMLを表示したとき、menuの部分が狭くなった上に画面自体のスクロールバーが出て横に広がってしまいます。

赤色のテーブルをウィンドウいっぱいに広げた状態で、オレンジ色のテーブルを囲むDIVタグを赤色のテーブルの80%にしたいのです。
オレンジ色テーブルのwidthの80%になっているとか？
でも、オレンジ色のテーブルのwidthがウィンドウに収まるような値なら、意図する表示になるのですが・・・。

どう直したらいいのでしょうか。

<html>
<script>
function hoge(){
document.getElementById("s1").innerText = "t1=" + document.getElementById("t1").offsetWidth + "*" + document.getElementById("t1").offsetHeight +
",d1=" + document.getElementById("d1").offsetWidth + "*" + document.getElementById("d1").offsetHeight +
",t2=" + document.getElementById("t2").offsetWidth + "*" + document.getElementById("t2").offsetHeight +
",d2=" + document.getElementById("d2").offsetWidth + "*" + document.getElementById("d2").offsetHeight +
",t3=" + document.getElementById("t3").offsetWidth + "*" + document.getElementById("t3").offsetHeight;
}
</script>
<body onload="hoge()">
<span id="s1"></span>
<table width="100%" height="95%" border="1" style="background-color:red;" id="t1">
<tr>
<td valign="top" width="200px">menu</td>
<td valign="top">
<div style="background-color:yellow" id="d1">
<table border="1" style="background-color:blue" width="90%" height="100%" id="t2">
<tr><td>hoge1</td></tr>
<tr><td>hoge2</td></tr>
<tr>
<td>
<div style="background-color:pink;overflow:auto;height:80%;width:80%" id="d2">
<table id="t3" width="3250" height="500" style="background-color:orange">
<tr>
<td>hoge3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： red-seal
回答日時：2009/11/27 22:19

こういうことでしょうか？

<html>
<script>
function hoge(){
document.getElementById("s1").innerText = "t1=" + document.getElementById("t1").offsetWidth + "*" + document.getElementById("t1").offsetHeight +
",d1=" + document.getElementById("d1").offsetWidth + "*" + document.getElementById("d1").offsetHeight +
",t2=" + document.getElementById("t2").offsetWidth + "*" + document.getElementById("t2").offsetHeight +
",d2=" + document.getElementById("d2").offsetWidth + "*" + document.getElementById("d2").offsetHeight +
",t3=" + document.getElementById("t3").offsetWidth + "*" + document.getElementById("t3").offsetHeight;
}
</script>
<body onload="hoge()">
<span id="s1"></span>
<table width="100%" height="95%" border="1" style="background-color:red;" id="t1">
<tr>
<td valign="top" width="200px">menu</td>
<td valign="top">
<div style="background-color:yellow" id="d1">
<table border="1" style="background-color:blue" width="100%" height="100%" id="t2">
<tr><td>hoge1</td></tr>
<tr><td>hoge2</td></tr>
<tr>
<td>
<div style="background-color:pink;overflow:auto;height:80%;width:100%" id="d2">
<table id="t3" width="100%" height="500" style="background-color:orange">
<tr>
<td>hoge3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご回答有難うございます。
オレンジ色のテーブルは、100%ではなく、縮小されないように"3250px"と値指定にしたいのです。その時に、画面そのものにスクロールバーが出てしまうので悩んでいました。
相変わらず苦戦してますがDivタグとスタイルシートで対応しようと思います。
また何かありましたらお願いします。

通報する

お礼日時：2009/12/01 09:50

No.1

回答者： ORUKA1951
回答日時：2009/11/25 15:12

そもそもデザインにテーブルを使うからそうなるのでは？

テーブルは内容によって伸縮することが期待されています。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　内容の無い要素<span id="s1"></span>とか、ソース自体に問題がありすぎる。
　

この回答への補足

ご回答ありがとうございます。
サンプルで作っただけのHTMLなので問題がありすぎるといわれるのはつらいところですね。ちなみに<span id="s1"></span>は、デバッグ用です。各々のwidthの変化を調べるためにJavaScriptでAlertではなく表示させるためです。
オレンジ色のテーブルは表形式で使用するので外せないので、他でテーブルをやめればこうはならないということなんでしょうか？
画面全体の幅がおかしくならないようにするにはどうしたらいいのか教えてください。

補足日時：2009/11/25 17:03

通報する