- ベストアンサー
フレームの上下でテーブルの横幅を合わせたい場合
パソコン用ホームページでフレームを使用したページを作成中なのですが、メニューを上フレームに横並びにして記述したので、それと同じ幅のテーブルを下フレームにも作りたいのです。 しかし！ブラウザが違うと横幅が違ってしまうので困っています。 下にタグを記述します。 なんでもいいのでアドバイスをお願い致します。 <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>
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
テーブルの幅を調整する場合、いろいろな条件により微妙に変わってしまうので、 その場に応じて設定を変える必要がありそうです。 今回はまず、<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
その他の回答 (2)
- abril
- ベストアンサー率69% (388/560)
すみません、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)
> テキストボックスがネットスケープでテーブルをぶち抜いてしまう現象について 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>内のテキストも同じサイズに揃いますので、そちらもお好みでどうぞ。
お礼
時間をかけてサイトに反映させていきたいと思います。 ご丁寧に回答いただきありがとうございました。
お礼
回答いただきありがとうございます。 テーブルに属性を入れて動作確認やってみました。 思い描いていたものに近づいたように思います。 テキストボックスがネットスケープでテーブルをぶち抜いてしまう現象についてご助言頂けると嬉しいです。