教えてください。横スクロールが発生するぐらい横に長い表組みを含むページがあるのですが、
そのテーブルを包むタグが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ベストアンサー
- 回答日時:
よくわかってませんが・・・
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タグでやろうと思います。
簡単なことのようなのに以外と難しいですね。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同じ幅指定のつもりなのに、ブ...
-
textareaの外側の文字が下付き...
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
html5のテーブル内でdivのタブ...
-
css(div)の中にtableタグを使う...
-
HTML5で、テーブル内tdタグの高...
-
<fieldset>タグについて
-
テーブル内のセル間にスペース...
-
CSSで特定のテーブルだけに...
-
tableタグとtableタグの間の余...
-
VBAで作れるかな?
-
ライブビュー時の<th>の幅
-
tableのcellpadding="0" cellsp...
-
アンカータグ内の文字の色を変...
-
文字を線で囲みたい
-
(HTML)Tableを任意の位置に置...
-
テーブルタグの中にdivを含めて...
-
tableタグとformタグの組み合わせ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルとテーブルの間隔について
-
TABLEのセルの中の文字を行単位...
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
HTML5で、テーブル内tdタグの高...
-
table表を横に並べる際の間隔指定
-
同じ幅指定のつもりなのに、ブ...
-
tableのcellpadding="0" cellsp...
-
html5のテーブル内でdivのタブ...
-
<fieldset>タグについて
-
textareaの外側の文字が下付き...
-
テーブル内のセル間にスペース...
-
画面幅に合わせてテーブルのカ...
-
HTMLのテーブルをExcelにCopy&P...
-
テーブルデータを折り返して表...
-
ホームページのテキストを折り...
-
フォームタグのプルタウンの隙...
-
HTML tableのセルにtextareaを...
-
table 幅固定で、端までいった...
-
(HTML)Tableを任意の位置に置...
おすすめ情報