Divの幅指定を無視して子テーブルの幅に合わせて全体が伸びてしまいます
はじめて投稿します。
下の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>
お礼
どうもありがとうございました。