横長のコンテンツを含む場合のdivタグの指定方法

質問

教えてください。横スクロールが発生するぐらい横に長い表組みを含むページがあるのですが、
そのテーブルを包むタグがdivの場合とtableの場合で、
見え方が異なるため困っています。

サンプル01（divタグで囲むと、横スクロール時に背景色が表示されない）
http://www.oreryu.sakura.ne.jp/test/test01.html

サンプル02（tableタグで囲むと、横スクロール時も背景が表示される）
http://www.oreryu.sakura.ne.jp/test/test02.html

やりたいことは
・divタグで囲んだ場合でも、tableタグ（サンプル02)のように、
横スクロール時に背景が見えるように設定できないか。

ということです。

divのwidth 100%はウィンドウサイズに合わせるため、挙動として正しいのは理解していますが、
このような場合はtableタグを使うしか方法はないのでしょうか。

現在作成中のページで、ヘッダーとフッターが消えてしまうため、
修正を求められており困っています。

そもそも横スクロールが発生しないようにすべきという回答は不要です。
ご存知の方がいましたら教えていただけますか。よろしくお願いいたします。

回答No.2

fujillin · ベストアンサー

よくわかってませんが・・・

width:100%のdiv内にtableが納まっていない（=はみ出している）ことによる結果だと思いますので、No1様のご指摘のようにwidthを必要な大きさにしてあげるか、overflow:autoなどにすればtableをdivの中に納まるようにすることが可能と思われます。
（overflow:autoの場合は、当然ながらスクロールバーが出ます）

逆に、divをtablelサイズに合せるのであれば、widthの指定をせずに、position:absoluteとすることで可能になると思われます。
ただし、この場合は全体のレイアウトでabsolute扱いされてしまい弊害が出る可能性があるので、divの外側で別に<div style="width:100%; height:170px;">みたいなラップでサイズを確保しておくのがよろしいかと。

お礼

回答ありがとうございます。

position:absoluteで求めていた結果は得られました。ありがとうございます。

ただ、これもこちらの説明不足なのですが、
当然テーブルのサイズに幅が揃ってしまうので、
テーブルサイズが小さい場合、以下のようにヘッダーサイズの幅が
ページごとに異なる結果になってしまいます。
※外側にdiv　width100%を追加しても同様

http://www.oreryu.sakura.ne.jp/test/test04.html

テーブルのコンテンツ幅がどのようなサイズであっても、
常にヘッダーはウィンドウサイズに合わせて表示されるようにしたいのですが、tableタグでないと無理なようですね。

http://www.oreryu.sakura.ne.jp/test/test06.html
http://www.oreryu.sakura.ne.jp/test/test07.html

とりあえず、急いでいるのでtableタグでやろうと思います。
簡単なことのようなのに以外と難しいですね。

ありがとうございました。

回答No.1

yyr446

width 100%じゃなく
width:2000pxみたく値指定しちゃだめなの。

お礼

回答ありがとうございます。

説明不足で申し訳ありません。
ページによってはこのような横長のテーブルがない場合もあるため、
ピクセル指定によって、必ず横スクロールが発生するのは望ましくありません。

やはりtableタグによる指定しかないのでしょうか。