divの横幅　自動調整

前へ 次へ
このQ&Aのポイント
  • PHP + MySQL +html + CSS を使用して、動的テーブルを表示するサイトを制作しています。
  • テーブルをdivで囲って横幅を調整し、テーブルに横スクロールバーを表示させています。
  • しかし、テーブルの横幅がdivで指定した幅よりも短い場合、divの幅が自動的に短くならず、表示に問題が生じます。対処法はありますか？
回答を見る
  • ベストアンサー

divの横幅　自動調整

PHP + MySQL +html + CSS で動的テーブルを表示するサイトを制作しています。 <div id="○○○"> <table></table> </div> といったように、中のテーブルをdivで囲ってコーディングしています。 外側をdivで囲い横幅を指定してあげて、テーブルに横スクロールバーを表示させているのですが、divで指定した横幅よりもテーブルの横幅が短くなった場合、外のdivの幅がテーブルに合わせて短くならないのですが、このような場合、何か対処法はございますでしょうか。 superTable.jsを使用しており、このjsの使用がテーブルの外側にdivをおき、cssを使ってdiv側にスクロールバーを表示される仕様になっております。 以上、よろしくお願い致します。

  • CSS
  • 回答数2
  • ありがとう数13

質問者が選んだベストアンサー

  • ベストアンサー
  • warpspace
  • ベストアンサー率56% (83/147)
回答No.2

superTable.jsを使用してみましたがテーブルの横幅を短くした場合、外のdivの幅が テーブルに合わせて短くなり、問題なく動作します。 yama-maronさんのソースに誤りがあると思いますよ。

yama-maron
質問者

お礼

warpspaceさん ご連絡が遅くなってしまい、申し訳ございません。 ご教授の程、どうもありがとうございます！ 実際に試してみていただいた、ということでご丁寧な対応、とても助かります。 warpspaceさんの方では正しく動作されていたんですね！！ 当方、HTMLやJavaScriptについてまだまだ初心者なので、仰る通り書き方が違っている可能性が高いと思います。 一度ソースを見直してみようと思います。 ご教授いただき、ありがとうございました！

その他の回答 (1)

  • warpspace
  • ベストアンサー率56% (83/147)
回答No.1

divのCSS指定方法が誤っていませんか。 　<div id="○○○"> 　　　　　↓ 　<div class="○○○">

yama-maron
質問者

お礼

warpspaceさん 早速のご回答、ありがとうございます。 上記、ご指摘いただきました通り、id ではなく classで指定しておりました。 どうもありがとうございます！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • ブラウザのサイズを変えたら、divのボックスの高さも合わせて

    ブラウザのサイズを変えたら、divのボックスの高さも合わせて 可変できるようにしたいです。 さらに、可変したdivのボックスの高さより内容量が多い場合は ブラウザのスクロールバーのようにCSSのoverflow:autoで スクロールが表示されるようにしたいと考えております。 現時点で、スクロールバーはオリジナルの画像で作成しており、 表示させるのにjScrollPane.jsというJavaScriptを使用しています。 しかし高さが固定されており、カスタマイズしようと思っているのですが なかなかうまくいきません。 どなたか、実現方法をご教授願えますでしょうか。 よろしくお願いいたします。 ※情報不足であれば、追記いたしますのでご指摘お願いいたします。

  • CSSだけで、テーブルにスクロールバーを表示させたいのですが…

    CSSを使い、テーブルにスクロールバーを表示させたいのですが <div style="height:60px; width:300px; overflow-y:scroll;"> <table border=1 width=300> : </table> </div> 上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか？ 出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが… CSSで .scroll { overflow: scroll; visibility: visible; height: 100px; width: 140px; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。

    • ベストアンサー
    • HTML
  • 横幅1200pxのHPをセンタリングしたい

    みなさま、お知恵を貸してください。 今HPを作っています。 横幅1200pxで作成いたしまして、 ブラウザ横幅1200px以下で見たときに全体をセンタリングした状態で表示したいのです。 サイト全体の横幅をそもそも変えれば、、というのは時間が限られておりできません。。 CSSやJSでなんとか調整できませんでしょうか。 なお、ブラウザが横幅980px以上では横スクロールを消したいです。 コーディング初心者のためなかなか解決策が見つかりません。。 どうぞよろしくお願い致します。

    • ベストアンサー
    • CSS
  • 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
  • HTMLで横幅をCSSで設定できません。

    HTMLで横幅をCSSで設定できません。 headerを作成しているのですが、画像のように横幅が外枠の wrapperをはみ出して表示されてしまいます。 はみ出した値は5pxとpaddingで指定した値と一致します。 headerをtableタグで作成した場合、横幅700pxの枠中での padding-left:5px;になり、横幅には変化はありません。 しかし、<div id="header">で横幅を700pxとし、 padding-left:5px;とすると、headerの横幅が 5px増えてしまいます。 <div id="header">の横幅を変化させずに、 paddingを指定することは可能なのでしょうか。 わかる方いらっしゃいましたら宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; } #header { width: 700px; padding-left: 5px; }

    • ベストアンサー
    • HTML
  • IE7の<div>のバグ

    IE7でgooglemapの表示がおかしくなります。 <div id=～>で指定した、googlemapを表示させる部分だけ、 スクロールしても左下に必ず表示されるようになってしまいます。 しかもスクロールバーの上にマップが出てくる状態になってしまっています。 親ページのcssに overflow:hidden その下に overflow:auto が設定されています。 フレームが上下に分かれていて、外枠のスクロールは表示せず、フレーム下部のスクロールだけ表示させるためです。 mapはフレーム下部に設定しているのですが、どうやら外枠のスクロールの設定に依存しているようです。 floatは使用していません。 <div id～>にposition:relativeを指定してもだめでした。 一番上位のoverflowではなく、そのひとつ下のoverflowの設定にさせたい場合はどうしたらよいのでしょうか。 他のdivタグはそのようになっています。 また、IE8、IE9でも目的の動きになっています。 IE7だけが上位を見てしまうようです。

  • 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
  • HPの横幅が広くなるのを防ぐにはどうすればいい？

    取引先の会社のHPの一部を作成する仕事をしています。 自社のブラウザで確認しても気がつかないのですが、 取引先に渡した後、本サーバにアップされたページを 確認すると、なぜか、横幅が広がっています。 下にスクロールバーがでてしまい、困っている との報告を受けたのですが、どこを直せばいいのかが はっきりとは分かりません。 原因としてどこを直せば的確でしょうか。 問題がありそうなところを確認しながら 直せればいいのですが、直接取引先へは見に行けない状態です。（物理的に遠いので） スタイルシートを指定しています。 ページ内で使用している テーブルの横幅はピクセル指定していますが、 中は％指定で　７：３くらいにしています。 テーブルの中身もピクセル指定したら いいのでしょうか？ 　 横幅が、別のブラウザで見ても、広がらないように 指定する方法を教えてください。 困っています。どうか皆さん、知恵を貸して下さい。お願いします！！

  • 高さを指定せずに子divにスクロールバー

    お世話になっております。 内包されたdivにスクロールバーをつけたいのですが、高さを指定したくない場合はどうすれば良いでしょうか？ 何がしたいのかと言えば 高さを規定した親div内に、問題の子divを入れます。 この子divにoverfllow:auto;を効かせて、中のテキストがはみ出した場合にスクロールバーを表示させたいです。 問題はその子divの上部にもほかの要素が加わり、その内容量が動的に変わるので、スクロールバーを出したいdivの高さを指定することができないのです。 高さを指定しなければ、overfllowでスクロールバーを出せません…。 cssで解決する方法は御座いますでしょうか？ お詳しい方、何卒ご教授下さい。 だいぶ簡略化したものですが、下記コードがイメージに近いです。 汚いコードですが・・・ <style type="text/css"> <!-- *{margin:0;padding:0;} --> </style> <body> <div style="width:500px;height:150px;border:1px solid #555;margin:10px;"> <p style="width:50px;height:150px;float:left;background:#ccc;">ナビ。float:leftしてます。</p> <div style="width:450px;float:left;"> <p>ここに文章や画像・リストがきます。高さはページごとに変わります。</p> <div style="border:1px solid #aaf;overfllow:scroll;">子divです。わかりやすいよう、overfllowはscrollにしてあります。<br /> （「親divの高さ」-「他の要素の高さ」）＜「本文の量」のとき、スクロールバーを表示させたいです。<br /> 高さを規定すべきですが、↑要素の内容量がページごとに変わるため、難しいです。<br /> cssのみで解決することは可能でしょうか？無理であれば、javascript等でも構いません。<br /> 何卒宜しくお願い致します。<br /> 本文本文本文<br />本文本文本文<br />本文本文本文<br />本文本文本文<br /> </div> </div> </div> </body>

    • 締切済み
    • CSS
  • ウィンドウサイズを無視して、DIV要素を横一列に並べたい

    ウィンドウサイズを無視して、DIV要素を横に並べていきたいと考えています。 divごとにfloat:left;で一列に並んでくれますが、ウィンドウの端まで行くと改行されてしまします。 これを改行されずに横スクロールバーが付いて横に並べていきたいと考えています。 並べていきたいdivの大枠のdivにすべてに収まる横幅を与えれば表示されるのですが、今MTを使用して、更新するごとにdivが増えていくようになっていて、大枠のdivのサイズを固定にすることができなくて（javascriptとかで大枠のサイズを動的に与えることとができればいいのですが）。 そこで今つまずいてしまっていて。。 大枠をtableで、ならば可能だと思うのですが、 できる限りdivだけでやりたいと思っていて。。 どなたかご教授いただけますでしょうか。 よろしくお願いいたします。

    • 締切済み
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する