divタグとtableタグの違いと横スクロール時の背景表示について
- divタグとtableタグで横長のコンテンツを囲む場合の見え方に違いがあります。
- divタグでは横スクロール時に背景色が表示されない問題があります。
- tableタグを使えば横スクロール時も背景が表示されますが、divタグの場合はウィンドウサイズに合わせて幅が変化するため、背景が見えなくなります。
- ベストアンサー
横長のコンテンツを含む場合の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タグを使うしか方法はないのでしょうか。 現在作成中のページで、ヘッダーとフッターが消えてしまうため、 修正を求められており困っています。 そもそも横スクロールが発生しないようにすべきという回答は不要です。 ご存知の方がいましたら教えていただけますか。よろしくお願いいたします。
- casionet
- お礼率90% (39/43)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （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;">みたいなラップでサイズを確保しておくのがよろしいかと。
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
width 100%じゃなく width:2000pxみたく値指定しちゃだめなの。
お礼
回答ありがとうございます。 説明不足で申し訳ありません。 ページによってはこのような横長のテーブルがない場合もあるため、 ピクセル指定によって、必ず横スクロールが発生するのは望ましくありません。 やはりtableタグによる指定しかないのでしょうか。
関連するQ&A
- DIVタグでの擬似インラインフレーム
<DIV>タグで擬似インラインフレームを実現させようと思っています。 <DIV>タグ内に<table>タグがあって、<td>タグ内に<A>タグテキストリンクがある場合に、そのリンクを右クリックしてプロパティを表示させると、 <DIV>タグの位置がずれてしまいます。 ・動作テスト OS：WindowsXP SP１ ブラウザ：IE6 ・テキストリンク<a>タグを右クリックしてプロパティを表示させたときのみ発生する。 ・NN7.1では発生しません。 原因がまったくわかりません。 簡単な例↓ <DIV style="width:640px;height:350px;overflow:scroll;"> <table width=620px><tr><td><A href=http://www.yahoo.co.jp>YAHOO</A></td></tr></table> </DIV> 以上のような感じです。 しかし、実際に操作していただくと、何が問題なのかがわかると思いますので、以下のページを参照してください。 http://members3.jcom.home.ne.jp/takokko/divframetest.html 大変困っております。なにとぞ、宜しくお願いいたします。
- ベストアンサー
- HTML
- DIVタグでの表のセンタリング
ウインドウズXPプロ、ホームページビルダーV6.5でページを作成しています。エクスプローラーでの表示は全く問題ないのですが、ネットスケープ7.1やオペラ7.54で表示すると、DIVタグでセンタリングした表やHタグの背景がセンタリングされません。左寄りに表示されます。テキストや画像はセンタリングされています。 <DIV align="center"> や <DIV style="text-align:center"> ではネットスケープやオペラで表やHタグの背景をセンタリングすることは出来ないのでしょうか。
- 締切済み
- ホームページ作成ソフト
- divのheight指定で画面一杯に表示したい
よろしくお願い致します。 <div>の<height>を100%に指定して、 タブレット等での表示時、縦でも横でも画面一杯に 表示させたいと考えています。 とりあえず css で以下は宣言済みです。 html, body { height: 100%; margin: 0px; padding: 0px; } 親子構造としては以下を想定しています(いくらか簡略化しています) <html> <body> <div id="H" style="height:60px;"> (1)ここにヘッダー的なもの </div> <div id="B" style="height:100%; overflow: auto;"> (2)この部分を縦一杯にしたい </div> </body> </html> (2)の部分にはjavascriptでサーバから取得した XMLのデータを埋め込んでおります。 その際、選択行の色付け等を行いたかった為、 大枠を<div>でくくり、その中に<table>で表組みしています。 最終的な構造は以下のようになっているはずです。 <div id="B" style="height:100%; overflow: auto;"> <div id="rdiv1"><table id="rtbl1"><tr><td ・・・ /td></tr></table></div> <div id="rdiv2"><table id="rtbl2"><tr><td ・・・ /td></tr></table></div> <div id="rdiv3"><table id="rtbl3"><tr><td ・・・ /td></tr></table></div> ・・・ </div> 行ごとの<div>や、その中の<table>でも height: 100%; は指定しています。 また、1行あたりの高さは<td style="height: 40px;">と指定しています。 (rowspanを使ってのぶち抜きを行っているため) html と body に height:100%; を指定しているので、 予想ではヘッダー用のdivが指定の高さで表示され、 次のdivが残りの高さ分一杯に表示。 その中のデータは overflow:auto; でスクロールできる。 と考えていたのですが、実際はjavascriptで埋め込んだdiv、 及びtableの高さまで伸びてしまい画面上を大きくはみ出してしまいます。 （divのoverflowが全く機能しません） 100%ではなく 500px としてみたところ、 そのサイズに収まってスクロールできました。 （縦一杯ではありませんがdivのoverflowは機能しました） 何とか height 100% を実現して、 divのスクロールバーのみでの表示を行いたいのですが、 何か指定が足りないのでしょうか？
- ベストアンサー
- CSS
- floatさせたdivタグを折り返させたくない
Javascriptで開いた子ウィンドウ内のページについて レイアウトで困っております。 以下のようなブロック要素の配置について <div> <div style="float; left"> コンテンツA </div> <div style="float; left"> <div> コンテンツB </div> <div> コンテンツC </div> </div> <div style="clear: both"> </div> 以上のような配置になっており、 コンテンツ３の中身をJavascriptで書き換えています。 その際、コンテンツCの横幅が変動し右に大きく広がる場合があります。 それにより、ウィンドウサイズによってはコンテンツBCがコンテンツAに回りこんでしまいます。 何故こうなるかは理解出来るのですが、対策が思い浮かびません。 ●思いついたが避けたい対応策 ・親のdivタグに想定出来る最大値のwidthを設定する ・tableタグによるレイアウト 良い対応策はございませんでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- floatを適用したdiv内部にあるpタグのmarginについて
floatを適用したdiv内部にあるpタグのmarginについて 現在HTMLとCSSを勉強している者です。 cssのmarginの挙動がいまいち理解できずに困っていたもので、 ご回答いただきたく質問させていただきました。 以下私が作ったサンプルHTMLとCSSです。 ==========HTML========== <div id="test01"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test02"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test03"> <p>Pタグで囲まれた文章です。</p> </div> <div id="clear"> <p>clear: bothです。</p> </div> （<body>前、</body>後省略） ==========CSS========== html, body, div { margin: 0; padding: 0;} p {margin: 10px; padding: 0;} div#test01 {background-color:#EEE; width: 900px;} div#test02 {background-color:#CCC; float: left; width: 650px;} div#test03 {background-color:#AAA; float: left; width: 250px;} div#clear {background-color:#888; clear:both; width: 900px;} 先頭に900pxのdiv（test01）、その下に二つのdiv（test02、03）をfloat:leftで並べました。 最後にclear:bothを行っております。 そして各div内に10pxのmarginを付与したpタグ文字を入力しているのですが、先頭のdivとfloat:leftを行ったdivで、marginの結果が異なってしまいました。 先頭のdivは上下に白い10pxの余白、左はtest01で指定した背景色を残したまま10pxの余白が作られ、float:leftのdivではtest02、03で指定した背景色を残したまま上下左右に10pxの余白が作られています。 このように同じ効果のpタグでも表示が異なってしまう理由は何でしょうか。 また先頭のdivの場合、上下左右に10pxの白または背景色の余白ができるのなら理解できるのですが、何故上下と左右でmargin結果が異なるのか、理由も知りたいです。 おそらくpaddingを併用すれば思った表示にはできると思うのですが、今回はこうなってしまう理由が知りたく質問させていただきました。 また私の記述方法に誤りがあればご指導いただけると助かります。 宜しくお願い申し上げます。
- 締切済み
- HTML
- DIVの幅を常に100％にしたい
以下の構成でページを作っています。 <body> <div id="div1"> </div> <div id="div2"> <table id="table1">...</table> </div> </body> 「div1」には背景色を設定し、横幅100％で表示しています。 「div2」内のテーブル「table1」の内容はPHPで出力しているのですが、 iPhoneで表示したときに、テーブルの幅が大きくなる(画面の幅を超える)と、 「div1」の幅が元々の画面サイズまでしか描画されません。 テーブルの幅が大きくなった時に、「div1」も一緒に大きくなるようにするにはどうすればいいでしょうか。 外枠用のテーブルを使えばできるのでしょうが、できれば構成を変えずにやりたいです。
- ベストアンサー
- HTML
- divの横幅 自動調整
PHP + MySQL +html + CSS で動的テーブルを表示するサイトを制作しています。 <div id="○○○"> <table></table> </div> といったように、中のテーブルをdivで囲ってコーディングしています。 外側をdivで囲い横幅を指定してあげて、テーブルに横スクロールバーを表示させているのですが、divで指定した横幅よりもテーブルの横幅が短くなった場合、外のdivの幅がテーブルに合わせて短くならないのですが、このような場合、何か対処法はございますでしょうか。 superTable.jsを使用しており、このjsの使用がテーブルの外側にdivをおき、cssを使ってdiv側にスクロールバーを表示される仕様になっております。 以上、よろしくお願い致します。
- ベストアンサー
- CSS
- 固定幅div内のテーブルセルの幅指定方法
幅を指定して横スクロールバーを有効にしたdivがあります。 その中に、divよりも幅の広いtableを置き、thやtdの幅を指定したいのですが、有効になりません。 tableへの幅指定は有効になるのですが、内容が動的に変化するので、セル単位で幅を指定したいと思っています。 解決方法がありましたらお願いいたします。 HTML：標準モード UA：Windows xp IE6 サンプルコード： <style> div{ height:200px; width:200px; overflow-x:scroll; border:#f99 solid 1px; } table{ background:#ddd; border:#666 solid 1px; } td{ width:100px; border:#666 solid 1px; } </style> <div> <table> <tr> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> </tr> </table> </div>
- ベストアンサー
- HTML
- divタグで位置を指定したい
お世話になります。 ホームページを作成しています。 写真がメインのページになりますので、基本的に文章は余りありませんが、 左下に少し更新用の文章があるようにしたいです。 この場合divタグを使用して下に持ってくる場合はどのようにすればよいのでしょうか？ マージンで調整したのですが、文字が増えてくると下に飛び出したりして不安定になって困っています。 お願いします。
- ベストアンサー
- CSS
- javascriptで指定するdivを読み込み
初歩的な質問ですみません。 どなたか詳しい方教えてください。 同一ページ内で、指定したdivの内容を読み込みしたいのですが javascriptで以下のことは可能でしょうか？ <html> <body> <div id="sample">内容内容内容内容内容内容</div> • • • ここにもsampleの内容を読み込んで表示させたい。 </body> </html>
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます。 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タグでやろうと思います。 簡単なことのようなのに以外と難しいですね。 ありがとうございました。