以下の構成でページを作っています。
<body>
<div id="div1">
</div>
<div id="div2">
<table id="table1">...</table>
</div>
</body>
「div1」には背景色を設定し、横幅100%で表示しています。
「div2」内のテーブル「table1」の内容はPHPで出力しているのですが、
iPhoneで表示したときに、テーブルの幅が大きくなる(画面の幅を超える)と、
「div1」の幅が元々の画面サイズまでしか描画されません。
テーブルの幅が大きくなった時に、「div1」も一緒に大きくなるようにするにはどうすればいいでしょうか。
外枠用のテーブルを使えばできるのでしょうが、できれば構成を変えずにやりたいです。
No.5ベストアンサー
- 回答日時:
>データを一覧表示する為のtableを入れます。
了解しました。
tableの目的から、table自体が広がるのは当然ですよね。これはスマホだろうがパソコンだろうが関係なく、横にスクロールしなければならないことは必然です。
それが入る親コンテナブロックの幅が指定されていても、すべてを表示しなければなりません!!!。ウィンドウ幅よりも広いとき横長の表が横スクロールを強制するのと同じです。
単純に
<body>
<div class="header">
</div>
<div class="section">
<table summary="何たらの表">...</table>
</div>
<div class="footer"></div>
</body>
だとして、
div.header,div.section,div.footer{}
に対してwidthを指定しなければ良いです。ルートのブロックは表示域を参照しますから、【引用】____________ここから
ルート要素の包含ブロック(これを初期包含ブロックと呼ぶ)はUAが定める。
ルートではなく且つ絶対配置でもない要素の場合、最も近い祖先ブロック要素の内容辺が包含ブロックになる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[視覚整形モデル詳細( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )]より
width:100%とすれば、ウィンドウ幅にされてしまうのは当然ですよ。デフォルトのautoのままにしておけばよいです。
No.6
- 回答日時:
>「div1」には背景色を設定し、横幅100%で表示しています。
あなた自身がこう指定したのだから
>「div1」の幅が元々の画面サイズまでしか描画されません。
こうなるのは当然でしょう、頭がおかしくなっていますね、そうでなければもともとHTMLとCSSを理解しきれていない
>DIVの幅を常に100%にしたい
と言っておきながら
>テーブルの幅が大きくなった時に、「div1」も一緒に大きくなるようにするには
などと問い、矛盾したことを同時に要求する、そして
>外枠用のテーブルを使えばできるのでしょうが
これなどはまったく意味不明ですね
ほかの人も言い触れていますが、そもそもあなたが提示したHTMLの記述では何のために<div>が2重に<table>を囲っているのですか?
背景画像の上に<table>があるだけのページなら、<div>はまったく不要ですよ?
おそらくリキッドレイアウトをとっているのでしょうが
それを勉強するときに、幅の最大値と最小値を設定するべきだというのを学ばなかったんですね
<div>のmin-widthをiPhoneの幅より大きくとれば解決するはずです
この回答への補足
知り合いでもない人に頭がおかしいとか言われる筋合いはありません。
ネット弁慶がやりたいなら2ちゃんねるというサイトがありますので、
そちらで思う存分誹謗中傷をやり合ってくださいね。
No.4
- 回答日時:
>class="section"の中にテーブルを入れるとすると、
>CSSをうまく書けば目的の処理ができるという事でしょうか?
そもそも、本当にtableなのですか?デザインのためではなく!!!
No.2
- 回答日時:
tableやdivをデザインのために使ってませんか?
・DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
tableは二次元データを表すものです。したがって、そのデータ構成が分かるように必ずデータ分だけサイズが横に広がり表示されなければなりません。(枠・ウィンドウを越えても!!!)
また、ブロックはサイズが指定されていればそれ以上は広がりません。広がらないためにサイズを指定するのですからね。
しかも含む内容と関係ないブロックの幅が広がるはずもありません。
★tableを使用したデザインをやめること!!
これは必須です。本当にtableなら枠をはみ出しても表示して良いのです。
★divは、HTML5では、
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html … )
・・DIVは多に適当な要素がないときの最終手段として使うことになります。・・・
HTML4では適当な要素がありませんから、class名を使ってきました。
単純に
<body>
<div calss="header">
<h1>タイトル</h1>
</div>
<div class="section">
<h2>本文</h2>
</div>
<div class="footer">
</div>
</body>
HTML5なら
<body>
<header>
<h1>タイトル</h1>
</header>
<section>
<h2>本文</h2>
</section>
<footer>
</footer>
</body>
としましょう。
この回答への補足
ご回答有難うございます。
現状、HTML5は使えません。
class="section"の中にテーブルを入れるとすると、
CSSをうまく書けば目的の処理ができるという事でしょうか?
No.1
- 回答日時:
iPhoneですか?……
一応styleに「#div1{width:100% !important;}」で常に100%ですけど
ローテーション時にサイズ変更したいとのことなのでそういうことではないですよね?
javascriptなら以下
window.onorientationchange = function() {
//bodyやdivのサイズ変更
document.body.style.Height = "100%";
document.getElementById("div1").style.Height = "100%";
}
画面サイズよりもコンテンツや要素のサイズが小さい場合100%にはならないので
bodyもサイズ変更するのをオススメします
この回答への補足
ご回答有難うございます。
style、javascript共に試してみましたが、結果は変わりませんでした。
> ローテーション時にサイズ変更したいとのことなのでそういうことではないですよね?
ローテーション時だけではなく、テーブルの幅が100%を超えて大きくなった時に、
div1も一緒に大きくなって欲しいのです。
div1の幅を100%指定
→テーブルの内容によってテーブルの幅が100%を超える
→div1の幅が初期の100%のままなので、右側にスペースができてしまう
という状況です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<div id="container">の使いか...
-
htmlのolやulなどlistにtitleや...
-
html の divとtable の役割
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
HTML属性での「""」 「''」違い
-
1サイト内にHTML5とXHTMLが混在...
-
h1に自分自身へのリンクを張...
-
inline-blockを上下中央揃えに...
-
<div>があれば</div>は必ずない...
-
文字の下線を画像に変えて表示...
-
<div>テキスト</div>
-
ヘッダーを左右に二分割する方...
-
divを横に並べる方法
-
「見出し画像+小見出し」と「見...
-
ヘッダーとフッターだけ背景を...
-
html5のブラウザの対応状況 ht...
-
line-height指定で発生する余白...
-
コンピューターの画像ブロック
-
XHTMLでループ処理のやり方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
HTMLのJIS規格について
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
要素間、要素内に隙間が空く
-
hタグの右横に画像を表示
-
inline-blockをネストすると表...
-
divとpの使いわけ
-
グリッドレイアウトで"auto-fit...
おすすめ情報