教えてください。横スクロールが発生するぐらい横に長い表組みを含むページがあるのですが、
そのテーブルを包むタグが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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS 【CSS】特定のリンクを含むaタグを指定できるかどうか? 3 2022/10/15 02:45
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript 指定したパスが現URLに含まれていたら特定要素を削除するJavascriptのコードを教えてください 2 2023/04/27 17:58
- PHP 掲示板を作成しておりアップロードファイルとメッセージを並べたいので、アドバイスお願い致します 2 2023/07/17 21:01
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
HTML5で、テーブル内tdタグの高...
-
<fieldset>タグについて
-
HTMLのテーブルをExcelにCopy&P...
-
同じ幅指定のつもりなのに、ブ...
-
table表を横に並べる際の間隔指定
-
テーブルの高さを100%にしたけ...
-
テーブル内のセル間にスペース...
-
HTML tableのセルにtextareaを...
-
正規表現で「より前」と「より後」
-
(HTML)Tableを任意の位置に置...
-
テーブルの線の幅を一重の線に...
-
横長のコンテンツを含む場合のd...
-
<table>のclass指定が継承されない
-
CSSで特定のテーブルだけに...
-
テーブルタグの中にdivを含めて...
-
テーブルの行を折りたたみたい...
-
tableタグとformタグの組み合わせ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
table表を横に並べる際の間隔指定
-
HTML5で、テーブル内tdタグの高...
-
HTML tableのセルにtextareaを...
-
(HTML)Tableを任意の位置に置...
-
テーブル内のセル間にスペース...
-
textareaの外側の文字が下付き...
-
同じ幅指定のつもりなのに、ブ...
-
html5のテーブル内でdivのタブ...
-
<fieldset>タグについて
-
tableの位置がIEとその他ブラウ...
-
tableを縦に続けるとtable間の...
-
画面幅に合わせてテーブルのカ...
-
HTMLのテーブルをExcelにCopy&P...
-
ラインを端から端まで画面いっ...
-
tableのcellpadding="0" cellsp...
-
ホームページのテキストを折り...
おすすめ情報