• ベストアンサー

TABLEの幅がっ?!

初めて質問します、WEBデザイナーをしている者です。 が、恥ずかしいことに、TABLEの幅がどうしても広がってしまってWindowサイズが幅800くらいになってしまいます・・・(涙) そのページのレイアウトは、まずヘッダー/メイン用/フッターを入れた3行1列の大きなテーブル(幅100%指定)があり、そのメイン用の中にメイン(幅90%指定)を入れ子にしている状態です。 メイン(幅90%指定)を消すと、ウィンドウ幅は自由に成り行きで動いてくれます。 でもメインを入れたとたんに800以上になってしまいます。 メイン(幅90%指定)を折り返し無しにしてないし、理由がわからないんです。 説明不足かとは思いますが、非常に困っています。 ヒントくらいでもいいのでアドバイスいただければと思いますm(._.)m

  • HTML
  • 回答数4
  • ありがとう数2

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

  • ベストアンサー
  • snowdust
  • ベストアンサー率66% (4/6)
回答No.4

ns_sayaさんのおっしゃるのは、 以下のようなテーブル構造という感じでしょうか? 加えて、そのあいだあいだにPHP等のコードが入っている・・・という状態ですか? ------------------------------------------------------------ <BODY> <TABLE WIDTH='100%'> <TR> <TD> ヘッダー </TD> </TR> </TABLE> <TABLE WIDTH='100%'> <TR> <TD> <TABLE WIDTH='90%'> <TR> <TD> メイン </TD> </TR> </TABLE> </TD> </TR> </TABLE> <TABLE WIDTH='100%'> <TR> <TD> ヘッダー </TD> </TR> </TABLE> </BODY> ------------------------------------------------------------ 参考にはならないかもしれませんが、 私もPHPを少々触るので、ns_sayaさんのような経験は多々あり、 何度も泣かされました(苦笑) コードとHTMLソースを混在させた場合、 インデントのためのタブや、フォームの微妙な書き方で、 HTMLだけで記述された場合のテーブルと、 コードが混在した場合のテーブルが全然変わってくることが多々あります。 加えて、HTMLコードの中にPHP等の言語を入れてしまうと、 なおさらテーブルは予定外になることがあります。 上記のようなシンプルな入れ子であれば、 そこまでサイズが変わることはないと思うのですが。 もしかしたら、入れ子だけが原因じゃないかもしれませんよ? sightさんがおっしゃっているように、 もうちょっとだけ、詳しい情報があれば、 もっと適切なアドバイスが出てくるのではないかと思いますが。

ns_saya
質問者

お礼

何度も親切な回答ありがとうございます。 ソースはこんな感じです。 <table width="100%"> <tr> <td> へっだ <table width="90% align="center"> <tr> <td>コンテンツ(1)</td> <td>コンテンツ(2)</td> </tr> </table> ふった </td> </tr> </table> でも入れ子にしないと確かにうまく行くんですよ・・・ それと、メインの部分が1行2列なんですよね、その幅指定と外枠テーブルの幅指定の数値がバグを起こしてそうです。 私もまだまだ修行が足りないですねー。 また何か会ったらよろしくお願いいたします。 ありがとうございました。

その他の回答 (3)

  • natural
  • ベストアンサー率37% (419/1115)
回答No.3

100%にしている方をピクセル数で明確に幅指定しても駄目、ということでしょうか?

ns_saya
質問者

補足

ありがとうございます。 幅指定の問題ではなくて、HTMLのクセって言うんでしょうか。 そんな問題みたいです。

  • sight
  • ベストアンサー率53% (199/370)
回答No.2

あと、 ・メインの部分にはどのような要素を入れているのか、 ・動作確認のOS/ブラウザバージョンは何か なども補足をお願いできませんでしょうか。 現在の情報だけでは、メインの中に大きな画像や、英数字の羅列などの改行を抑制させる要素が入ってるくらいしか原因が思いつかないもので。

ns_saya
質問者

補足

ありがとうございます。 多分入れ子にしているのが悪いんだと思います。 テーブルの幅指定の記述がたくさん重なると数字に矛盾が発生してしまって崩れてきますものね。 もう少しいじって研究してみます。 ありがとうございました。

noname#2601
noname#2601
回答No.1

だいたいのタグを書いて頂ければ、適切な(?)アドバイスが出来ると思うのですが、無理でしょうか?

ns_saya
質問者

補足

早速のご回答ありがとうございました。 ただ、使用しているタグにはPHPなどの記述が入っているため複雑で・・・ 貼り付けられるような長さではないんです(涙) でも少し原因がわかってきました。 ありがとうございました。

関連するQ&A

  • DREAMWEAVERのテーブルの幅

    WinXPでDREAMWEAVER MX2004を使用しています。 レイアウトにテーブルを使用しています。 標準モードではテーブルの幅は、指定どおり正しく表示されますが、拡張・レイアウトモードでは、指定したテーブルの幅と、括弧付きのテーブルの幅が出てきます。この括弧付きのテーブルの幅が、指定した値とは違っています。 各セルには正しい幅の値を入れているはずなのですが。 原因がわかりますでしょうか? よろしくお願いします。

    • 締切済み
    • CSS
  • CSSのテーブルの縦100%について

    CSSの縦100%指定について伺います。 現在、三行二列のテーブルを、縦100%のレイアウトにしようとしております。 上段一行は一列に統合して、ヘッダーを入れます。 下段一行は一列に統合して、フッターを入れます。 一行目と三行目の縦幅をピクセルで指定して、 二段目の高さをautoに指定し、 テーブル全体の縦の高さを100%にして、 ウィンドウサイズが変わったときに二段目のみが伸縮するように 出来るものでしょうか。 お分かりの方、どうぞご助言をお願いいたします。

  • テーブル(TD)の幅について。

    <TD WIDTH=100>この幅指定はディスプレイ幅内のテーブル幅なら有効なんですが ディスプレイ幅を超えるテーブル幅になると途端に崩れてしまい 意図しないところで勝手に改行されていたりします。 この問題を回避する為には<TABLE>の方にも幅指定してやらないといけないのでしょうか? それとも回避不能なんでしょうか?よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブル幅が固定できない

    cssに「table-layout: fixed;」を記載してテーブルの幅が固定になるように設定しています。 設定していますが、ブラウザの幅を狭めると テスト1|テスト2|テスト3 と表示されていたものが テスト1 テスト2 テスト3 と、レイアウトが崩れてしまいます。 <table>、<tr>、<td>タグにつけてみましたが、全て崩れてしまいます。 幅や高さ等も指定していますが、何かが足りないのでしょうか。

    • ベストアンサー
    • CSS
  • dreamweaver cs3 でのホームページ作成について

     お世話になります。 以前HPBで全てテーブルレイアウトで添付画像のようなHPを作成致しました。 サイトのページ数が約15枚ほどで、画像の「1,ヘッダー」 「3,左メニュー」「4,フッター」は全てIフレームにして別のHTMLを表示させるようにしています。 「1,ヘッダー」「3,左メニュー」「4,フッター」は全てのページで共通 で表示され「3,コンテンツ」のみ内容が切り替わるようにしています。  この度ページを更新しようと思ったのですが、段々と左メニューやコンテンツ、フッター等内容が多くなってきてしまい、なおかつテーブルの入れ子に次ぐ入れ子という感じでレイアウトしていたために、どれがどのテーブルかわからず、レイアウトを調整しようと色々といじっていたらレイアウトがぐちゃぐちゃになってしまいました。 そこでこの際勉強も兼ねて一からサイトを作り変えようと思っております。ソフトはdreamweaver cs3でやってみようかと思っています。 cssを使って何とか添付画像のようなレイアウトは作れたのですが、 ヘッダー内や左メニュー内にも細かな段組みレイアウトが作れません。 通常細かな段組み(ヘッダー部分のメニューや左メニューのレイアウト)についてはやはりテーブルでのレイアウトが正しいのでしょうか? まだdreamweaver cs3も使い始めて間もないもので細かなレイアウトの方法などが理解できていません。今後のサイト更新のためにも分かりやすい形で作りたいのですが・・・。 どなたかレイアウトについての参考URLや方法などご存知の方がいらっしゃいましたらご教授下さいませ。 よろしくお願い申し上げます。

  • テーブルの幅

    tableのwidth指定についての質問です。 同じレイアウトで複数のhtmlファイルを作るのですが、その中のテーブル及びセルの幅をwidthで固定してあるのにも関わらず、セル内のテキストの長さによって各ファイルごとのテーブルのセルの幅が、IEでの表示で変わってしまいます。 <table width="450" cellspacing="0" cellpadding="2" border="1"> <tr> <th bgcolor="#ffcccc" width="150">aaaaaaaaa</th> <th bgcolor="#ffcccc" width="286">\100,000</th> </tr> <tr> <td colspan="2">ここには商品説明が入ります。ああああああああああああああああああああああああああああああああああああ</td> </tr> </table> 上記のaaaaaaaaaの部分がファイルによって長さが違うのですが、それによってセルの幅が変わってしまいます。 IE6でプレビューすると変わりますが、firefoxでは変わりません。 <th>を<td>に変更すると、幅は固定され変わりません。 IEの場合、thでwidth指定が出来ないのでしょうか。 なぜ変わってしまうのでしょうか?どこかに記述の問題があれば教えていただければありがたく思います。

  • テーブルのレイアウトがうまくいきません

    DreamweaverMXで簡単なホームページを作っています。 テーブルをつかってレイアウトをしようと思いましたが、思うようになりません。やり方が間違っているのでしょうか? まず大枠で1行3列のテーブルを作り、幅だけ800pに指定。(高さ指定はしていません) 両端の列はそれぞれ幅だけ180pに指定。 で、そのそれぞれの列の中にまた必要なテーブルを作ってレイアウトしようとしてるのですが 一番左の列の中にテーブルが3つ入っていて一番縦長になっています。真ん中と右の列にも必要なテーブルや画像を入れているのですが左の列が長いせいかそれぞれの列の一番上がそろいません。左の列の長さに合わせて一番大外のテーブルの高さが決まってしまってしまいますが、真ん中と右の列の中のテーブルたちは左の列の高さの真ん中に配置されてしまいます。 方法がまずいのでこうなってるのだとは思いますが、本を見ながら勉強しつつやっていますが思うようにいかないので質問させてもらいました。 一番上をツライチに合わせるにはどうすればいいのでしょうか? というか上記の方法の悪いところを指摘していただければと思います。よろしくお願いいたします。

  • TABLEタグの幅指定

    テーブルの幅を厳密に指定したいのですが、 例えば以下のような1行2列のテーブルがあるとき、 <TABLE CELLSPACING=1 CELLPADDING=4 BORDER=0> <TR> <TD WIDTH=100>***</TD> <TD WIDTH=100>***</TD> </TR> </TABLE> このような場合にテーブルタグにWIDTH属性を加えるとすると、 100*2+4*4+1*3=219で、WIDTH=219が正確な値なのでしょうか? よろしくお願いします。

  • ドリームウェーバーのテーブルについて

    大きいテーブル(レイアウト用)の中に 小さいテーブル(表、8行×2列程度)を組んで、 その表に文字を入力していくのですが、 文字サイズを変えたり行並びをセンタリングにしたりしたとたんに、 テーブルが崩れてしまい、そのたびに表挿入まで戻らないと、 一度崩れたテーブルは戻りません(泣)。 どうしてでしょう??? いつ崩れるかとびくびくしながらやってます。 助けてください。お願いします。

  • tableがbodyにはみ出る。。

    文章での質問で恐縮ですが、 html例に記載のような形で、レイアウトを作っています。 ヘッダーとフッター、左右のBOXとベタな構成かと思ってますが、 右ボックス(div right-box)内のテーブルの行が増えた際(運用上、可変で増えます)に、 tableがdiv構成(wrap-1,wrap-2,right-box,footer)からはみ出して、bodyの領域に出てしまいます。 スタイルシートでは左右のボックスをfloat left、float rightしていて、 テーブルの行が可変なので、left-box以外にはheightは指定していないです。 ※left-boxのheight指定は100% heightを指定しなければ、基本的に行追加に合わせて、可変で動くような気がしているのですが、 どうもうまくいかないです。 left-boxにheightを指定しているのは、left-box内に定義している要素があり、 heightの指定がない場合に、その要素の高さになってしまうので、 right-boxと同じ高さになるように、100%を指定しています。 分かりにくい質問で申し訳ないですが、 right-boxのheightをtableの行追加に合わせて可変にする方法はないでしょうか? 本来、heightなしで可変になるのであれば、 可変にならない原因の推測をお願いします。 ---ここからhtml例--- <html> <head> </head> <body> <div id="wrap-1"> <div id="header">; </div> <div class="wrap-2"> <div id="left-box"> </div> <div id="right-box"> <table id="table"> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> </table> </div> </div> <div class="footer clear"> </body> </div> </div> </body> </html>

    • ベストアンサー
    • HTML