はじめて投稿します。
下の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>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
そもそもデザインにテーブルを使うからそうなるのでは?
テーブルは内容によって伸縮することが期待されています。
【引用】____________ここから
非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[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ではなく表示させるためです。
オレンジ色のテーブルは表形式で使用するので外せないので、他でテーブルをやめればこうはならないということなんでしょうか?
画面全体の幅がおかしくならないようにするにはどうしたらいいのか教えてください。
No.2
- 回答日時:
こういうことでしょうか?
<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>
ご回答有難うございます。
オレンジ色のテーブルは、100%ではなく、縮小されないように"3250px"と値指定にしたいのです。その時に、画面そのものにスクロールバーが出てしまうので悩んでいました。
相変わらず苦戦してますがDivタグとスタイルシートで対応しようと思います。
また何かありましたらお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
table内で画像と文字をセンター...
-
HTMLでテーブルを縦に並べたい!
-
Excelで可視部分だけをWeb形式...
-
htmlでテーブル内にテキストボ...
-
CSSのtransform: translate(-50...
-
エクセルでサイズに合ったもの...
-
指定時間になったら、WEBサイト...
-
Excel で等間隔で縦線を引きた...
-
aタグに直接style=""で:hoverを...
-
バーコードのサイズは拡大縮小...
-
ホームページビルダーで表の列...
-
エクセルでサイズ指定でPOP...
-
Microsoft1Officeの互換ソフト...
-
<h1>タグの後の行間を詰めたい。
-
Excel セルの幅が合わない
-
CSSでh1とその下の文字との行間...
-
表の幅が広がる
-
Excelの列や行の幅を表示...
-
CSSの設定
-
HTMLでブラウザを終了させる方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
table内で画像と文字をセンター...
-
表の中に表
-
HTMLでテーブルを縦に並べたい!
-
Excelで可視部分だけをWeb形式...
-
テーブルで3セル作った行の下に...
-
<td> 内のテーブルを上寄せにす...
-
表の中でのフォーム
-
CSS line-height が効かない
-
テーブルの中のグラデーション...
-
テーブルとテーブルの間に、隙...
-
セルの背景画像を、繰り返さず1...
-
cssのfont-sizeがFirefoxで効か...
-
innerHTMLを使わずに…
-
Jimdoで表組のなかの画像をポッ...
-
Firefox2で縦方向に隙間が出来...
-
スタイルシートで<table>の内側...
-
ヤフーストアのブースのカスタ...
-
Dreamweaverでソースが横一列に...
-
width="150" に収まるように・...
-
壁紙に複数の画像を使いたい
おすすめ情報