• ベストアンサー

フレームの上下でテーブルの横幅を合わせたい場合

パソコン用ホームページでフレームを使用したページを作成中なのですが、メニューを上フレームに横並びにして記述したので、それと同じ幅のテーブルを下フレームにも作りたいのです。 しかし！ブラウザが違うと横幅が違ってしまうので困っています。 下にタグを記述します。 なんでもいいのでアドバイスをお願い致します。 <html> <head> <title>テスト</title> </head> <body> <div align="center"> <table cellspacing="1" cellpadding="0"> <tbody> <tr> <th valign="top" class="td1" align="left"> あああ </th> <td width="200"> ううう </td> </tr> <tr> <td> <textarea rows="15" cols="70">いいい</textarea> </td> <td valign="top" class="td1"> えええ </td> </tr> </tbody> </table> <br> </div> </body> </html>

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

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

  • ベストアンサー
  • auty
  • ベストアンサー率58% (284/486)
回答No.1

テーブルの幅を調整する場合、いろいろな条件により微妙に変わってしまうので、 その場に応じて設定を変える必要がありそうです。 今回はまず、<table>タグにwidthとstyle属性を入れてみてください。 　　　width="700" 　　　style="table-layout: fixed;" これらは必要に応じて付けたりはずしたりしてください。 テーブル全体のwidth属性は、ややゆとりを持たしたほうが良いようです。 また、内容が文字だけの場合と<textbox>を含む場合とは違いが出てきます。 とりあえず、以下の様に変更してみてください。 ------------------------------------------------------------------- <table cellspacing="1" cellpadding="0" width="700" style="table-layout: fixed;"> ------------------------------------------------------------------- 詳しくは、以下のページも参考にしてみてください。 文字の場合 http://cvs.sourceforge.jp/cgi-bin/viewcvs.cgi/kagetaka/package/sample/html/table/Attic/width_cell.html?rev=1.2 CSSによるページレイアウトの考察 http://www.kiwi-us.com/~mizusawa/penguin/html_hint/css_tips/page_const.html

impressa
質問者

お礼

回答いただきありがとうございます。 テーブルに属性を入れて動作確認やってみました。 思い描いていたものに近づいたように思います。 テキストボックスがネットスケープでテーブルをぶち抜いてしまう現象についてご助言頂けると嬉しいです。

その他の回答 (2)

  • abril
  • ベストアンサー率69% (388/560)
回答No.3

すみません、ANo.2で誤記がありましたので訂正します。 CSSでクラスセレクタを使用していたのに、HTML側に指定し忘れていました。 ×<table cellspacing="1" cellpadding="0" border="0" summary="サンプル"> ↓ ○<table class="sample" cellspacing="1" cellpadding="0" border="0" summary="サンプル"> あと、CSS内のbodyの定義は本件の問題解決とは直接関係ないので無視して下さっても結構です。

  • abril
  • ベストアンサー率69% (388/560)
回答No.2

> テキストボックスがネットスケープでテーブルをぶち抜いてしまう現象について Netscapeだけではないですね。Firefoxでも同様の表示になります。 "table-layout: fixed;"と定義すると、1行目のセルに幅が指定されている場合、それを読み込んで後の行のレイアウトを固定する為、表示が早くなります。この場合であれば、【いいい】のセルの長さは、先立つ【あああ】で規定された幅（class="td1"にwidthの指定が入っているかどうか定かではないですが）、【えええ】は【ううう】（このサンプルでは200px）の幅で固定されることになります。 ただし、それらで規定された幅よりも、【いいい】【えええ】の実際のセル内のデータ量の幅が大きければ、それははみ出してしまいます。ただのテキストであれば、固定された幅まで達したところで自動的に折り返してどんどん垂直方向へセルが伸びて行くだけですからレイアウトは崩れませんが、今回の様にテキストボックス（<textarea>）が入っていておりしかもその幅がcols="70"とかなり大きく、それは実質【いいい】の幅を超えると解釈される為、テキストはその領域に併せて広がってしまい、その親要素であるセルの枠をぶち抜いてしまう事になります。IEがぶち抜かないのは、たまたまcols="70"に対する表示幅の解釈が小さめ（<textarea>内のfont-sizeに対しても）であったという事もありますが、IEは妙な方向への独自解釈が多い為、あまりそちらを基準するのはお勧めしません。 試しに一度テーブルのボーダーを表示させて見て下さい。<textarea>が<td>に対してどの様な状態になってしまっているかが一目瞭然です。 "table-layout: fixed;"が指定されていなければ、初期値の"table-layout: auto;"が適用される為、列の合計幅が実質テーブルの幅を超える様な事になってしまった場合は、各セルの幅指定は無視してテーブル幅全体を拡げる為、セルの領域を超えてデータがはみ出してしまう、という状態にはなりません。 （参考）http://www.seo-equation.com/html/css/table-layout まずこのプロパティの性質をよく理解して下さい。 しかしながら本件はそれぞれのコラム幅を固定する、というのが目的の様ですので、はみ出さずかつ幅を可変にせず、という状態にしなければなりません。 <textarea>のcols属性の数値によって表示される幅は環境によりかなり結果が違うので、この幅を固定するにはCSSでwidthを指定してやる必要があります。 本サンプルの場合、テーブル全体の幅が700px、2列目【ううう】が200pxということは、自ずと1列目【あああ】の幅は500px（以下）でなければならない事になります。であれば、それぞれのコラムの中の要素がセルの幅を超えない様にコントロールします。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <table cellspacing="1" cellpadding="0" border="0" summary="サンプル"> <tbody> <tr> <th class="col1">あああ</th> <td class="col2">ううう</td> </tr> <tr> <td class="col1"><textarea rows="15" cols="70">いいい</textarea></td> <td class="col2">えええ</td> </tr> </tbody> </table> ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- body { font-size: 12px; background: #ffffff; padding: 0; margin: 0; } table.sample { table-layout: fixed; width: 700px; border-collapse: collapse; } table.sample .col1 { width: 500px; } table.sample .col2 { width: 200px; } table.sample textarea { width: 99%; } ---------------------------------------------------------------------- とでもすれば宜しいかと。 最後の、textareaのwidthは100%としてしまうと若干2列目のコラムに被ってしまう場合があるので、余裕を持たせて99%としています。もっと2列目との余白を持たせたければ、お好みでパーセンテージを低くして下さい。 なお、textareaの定義に更にbodyと同じfont-sizeを指定してやれば、<textarea>内のテキストも同じサイズに揃いますので、そちらもお好みでどうぞ。

impressa
質問者

お礼

時間をかけてサイトに反映させていきたいと思います。 ご丁寧に回答いただきありがとうございました。

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

関連するQ&A

  • tableでレイアウトが崩れる場合

    技術の足りなさからCSSにできなかったので、再度テーブルでサイズを指定してやってみようとしているところです。 どこかの数字がおかしくなっていると思うのですが、どうしてもわかりません。 ちゃんと表示できるブラウザとそうでないブラウザがあり、Firefoxは環境設定により表示が崩れる場合があります。 使用ソフトはビルダーの１１です。 なんでも良いのでどうぞアドバイスをよろしくお願い致します。 <body> <div ALIGN="center"> <table> <tbody> <tr> <td CLASS="td4" HEIGHT="70"> <table WIDTH="600" CELLSPACING="1" CELLPADDING="0"> <tbody> <tr> <td VALIGN="top" CLASS="td1" WIDTH="400" ALIGN="left" HEIGHT="180"> <b>文字 <textarea ROWS="15" COLS="70">文字</textarea><br> <br> </td> <td VALIGN="top" CLASS="td1" WIDTH="100" HEIGHT="180"> <table CELLSPACING="0" CELLPADDING="4"> <tbody> <tr> <td CLASS="td2" HEIGHT="16" WIDTH="100">文字</td> </tr> </tbody> </table> 文字 <br> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br> </div> </body>

    • ベストアンサー
    • HTML
  • テーブルの上下線を消したい

    タイトル通り、テーブルの上下だけの線を消したいのですが、 どのように書けば消えるのでしょうか？ 一応今のものは <TABLE border="0" width="290" bgcolor="#ffffff" cellspacing="1" cellpadding="10" style="border:dotted 1px #000000"> <TBODY> <TR><TD valign="top" align="right" width="290" bgcolor="#ffffff" height="800"> <P>　</P><p>　</p> <DIV align="right"> ○○○ </DIV> </TD> </TR> </TBODY> </TD> </TR> </TBODY> </TABLE> です。お願いします。

    • ベストアンサー
    • HTML
  • テーブルにCSSの枠のつけ方

    はじめまして、こんにちわ。 HTMLで組んだテーブルにCSSの枠をつけたいと思っています。 ここのページ​http://www.rakuten.ne.jp/gold/royalparty/​ の『NEW ITEMS』みたいに1列4行に枠をつけたい場合はどうしたら良いのでしょうか。よろしくお願いいたします。 組んだテーブルは下です。 <table class="newtable" cellspacing="0" cellpadding="0" border="0" width="610"> <tbody> <tr> <td class="photo" valign="middle" align="center" width="138"> 1-1 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-2 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-3 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-4</a></td> </tr> <tr> <td valign="top" align="left" width="138"> 2-1</a> </td> <td valign="top" align="left" width="138"> 2-2</a> </td> <td valign="top" align="left" width="138"> 2-3 </a> </td> <td valign="top" align="left" width="138"> 2-4</a> </td> </tr> <tr> <td valign="top" align="left" width="138">3-1</td> <td valign="top" align="left" width="138">3-2</td> <td valign="top" align="left" width="138">3-3</td> <td valign="top" align="left" width="138">3-4</td> </tr> </tbody> </table>

    • ベストアンサー
    • HTML
  • tableのヘッダを固定したい

    IE6,7,8でテーブルのヘッダを固定したいのですが うまくいきません。 条件は以下のとおりです。 　・width: ?%として大きさを可変にする。 　・ヘッダを固定する。 　・ボディにはスクロールバーをつける これまでwidthは固定で作成してきたのですが 可変にする場合どのようなcssにすればよいのでしょうか。 よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>

  • 2つのテーブルの幅を一致させたい

    以下のHTMLで、2つのテーブルのセル幅が一致しません。 JavaScriptではヘッダのセル幅をボディのセル幅に合わせています。 ボディ部分の文字列をすべて日本語にするとうまくいくのですが・・・ JavaScriptというよりはHtmlの問題な気がしますが、よろしくお願いします。 jqueryを使用しています。 <html> <head> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { headerTableWidthFit(); }); $( window ).resize(function(){ headerTableWidthFit(); }); function headerTableWidthFit() { var i = 0; $('#resultBodyTable table tbody tr:eq(0) td').each(function() { $('#resultHeaderTable table th').eq(i).width($(this).width()); i++; }); } </script> </head> <body> <div id="container"> <div id="resultHeaderTable" class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> <th>お</th> <th>か</th> <th>き</th> <th>く</th> </tr> </thead> </table> </div> <div id="resultBodyTable" class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> <td>お</td> <td>か</td> <td>き</td> <td>く</td> </tr> </tbody> </table> </div> </div> </body> </html>

  • tableセルに色を付ける

    　tableセルに色を付けます。 　で、行で指定しようとtrタグにbgcolorをいれました。 　ネスケでは問題ないのですが、ie6だとテーブルの外にも色がついてしまい変です。 　セルを結合させたりしたりしてることが影響あるのでしょうか？ieのバグですかね？ 　コレを解決するには、trで色を付けるのを諦めて、セルごと（tdやth）に指定していくしかないのでしょうか。 　スタイルシートは使わない前提です。htmlだけでの解決があったら教えてください。 <html> <head> </head> <body> <table border="10" align="center"> <tr> <th colspan="2">タイトル</th> </tr> <tr> <td height="70" rowspan="2" align="center" valign="top">１</td> 　<td>あ</td> </tr> <tr> 　<td>い</td> </tr> <tr bgcolor="red"> 　<td>２</td> 　<td>う</td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • このフレームを直してもらいたいのですが

    わかりにくいかとは思いますが、 下のようなフレームを作っています。 ―――――――――――――――――― ｜　　　　　　　　　　　| ｜　　　　　　　　　　　| 　　ここがない→ ｜_＿＿＿＿＿＿＿ |＿＿＿＿＿＿＿＿＿＿ ｜　　　　　　　　　　　　　　　　　　　　　　　　　 | ｜　　　　　　　　　　　　　　　　　　　　　　　　　 | ｜＿＿＿＿＿＿＿__＿＿＿＿＿＿＿＿＿＿| まず「田」のテーブルを作って、下段を結合して一つにすると、 以上のようになってしまいます。なぜでしょうか？ ソースを書いておきますので、直してもらえませんでしょうか。 -------------------------------------------------- <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <P> <TABLE cellSpacing=0 cellPadding=0 bgColor=#000000 border=0> <TBODY> <TR> <TD bgColor=#000000> <TABLE cellSpacing=1 cellPadding=7 border=0> <TBODY> <TR> <TD bgColor=#ffffff colSpan=5> <P>aaaaa</P></TD> <TD bgColor=#ffffff>ここが消える→</TD></TR> <TR> <TD bgColor=#ffffff colSpan=6> <P>aaaaa</P></TD></TR></TBODY></TABLE> </TD></TR></TR></TBODY></TABLE></P> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • 一気に「テーブルの2列目のtdタグを右詰にする

    <html> <head> <title>test</title> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td>bbb</td></tr> <tr><td>2</td><td>ccc</td></tr> </table> </body> </html> このようなテーブルで 右側の2列目のtdタグを右詰にしたいのですが、 一気に「テーブルの2列目のtdタグを右詰にする」と言う方法は有りますか? 今は <html> <head> <title>test</title> <style type="text/css"> td.example1 { text-align: right; } </style> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td class="example1">bbb</td></tr> <tr><td>2</td><td class="example1">ccc</td></tr> </table> </body> </html> このようにしていますが 一つ一つタグを付けるのは非効率的と思っています。

    • ベストアンサー
    • HTML
  • Dreamweaverのデザインで表示がおかしい時

    IEだと綺麗に表示されるけど、Dreamweaverのデザインで見ると表示がおかしい時って結構あり困ってます。 ソースフォーマットとかやってもやはり駄目です。 今回の場合、どのタグが悪そうでしょうか？ <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-JP"> </HEAD> <BODY> <BR> <BR> <BR> <TABLE align="center" cellSpacing=0 cellPadding=0 width="95%" bgColor=#0066cc border=0> <TBODY><TR><TD> <TABLE cellSpacing=2 cellPadding=1 width="100%" border=0> <TBODY> <TR bgColor=#0066cc> <TD align=middle><SMALL><B><FONT color=#ffffff> テキストツール </FONT></A></B></SMALL>&nbsp; </TD></TR> <TR bgColor=#ffffff> <TD align=middle> <TABLE height="400" cellSpacing=0 cellPadding=1 width="95%" border=0> <TBODY> <TR valign=top> <TD width="100%" valign="center" align="center"> <BR><A>トップページ</A><BR><BR> </TD> </TR> <TR valign=top> <TD width="100%" valign="top" align="center"> <A HREF="list">あ</A><BR><BR> <A HREF="clist">い</A><BR><BR> <A HREF="slist">う</A><BR><BR> </TD> </TR> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </BODY></HTML>

  • 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と同じ高さになるように、１00%を指定しています。 分かりにくい質問で申し訳ないですが、 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

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する