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

Question

パソコン用ホームページでフレームを使用したページを作成中なのですが、メニューを上フレームに横並びにして記述したので、それと同じ幅のテーブルを下フレームにも作りたいのです。しかし！ブラウザが違うと横幅が違ってしまうので困っています。下にタグを記述します。なんでもいいのでアドバイスをお願い致します。テスト

あああ	ううう
いいい	えええ

auty · Accepted Answer

テーブルの幅を調整する場合、いろいろな条件により微妙に変わってしまうので、その場に応じて設定を変える必要がありそうです。今回はまず、タグにwidthとstyle属性を入れてみてください。　　　width="700" 　　　style="table-layout: fixed;" これらは必要に応じて付けたりはずしたりしてください。テーブル全体のwidth属性は、ややゆとりを持たしたほうが良いようです。また、内容が文字だけの場合とを含む場合とは違いが出てきます。とりあえず、以下の様に変更してみてください。 -------------------------------------------------------------------

------------------------------------------------------------------- 詳しくは、以下のページも参考にしてみてください。文字の場合 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

abril · Answer

すみません、ANo.2で誤記がありましたので訂正します。 CSSでクラスセレクタを使用していたのに、HTML側に指定し忘れていました。 × ↓ ○

あと、CSS内のbodyの定義は本件の問題解決とは直接関係ないので無視して下さっても結構です。

abril · Answer

> テキストボックスがネットスケープでテーブルをぶち抜いてしまう現象について Netscapeだけではないですね。Firefoxでも同様の表示になります。 "table-layout: fixed;"と定義すると、1行目のセルに幅が指定されている場合、それを読み込んで後の行のレイアウトを固定する為、表示が早くなります。この場合であれば、【いいい】のセルの長さは、先立つ【あああ】で規定された幅（class="td1"にwidthの指定が入っているかどうか定かではないですが）、【えええ】は【ううう】（このサンプルでは200px）の幅で固定されることになります。ただし、それらで規定された幅よりも、【いいい】【えええ】の実際のセル内のデータ量の幅が大きければ、それははみ出してしまいます。ただのテキストであれば、固定された幅まで達したところで自動的に折り返してどんどん垂直方向へセルが伸びて行くだけですからレイアウトは崩れませんが、今回の様にテキストボックス（

）が入っていておりしかもその幅が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">いいい

えええ ---------------------------------------------------------------------- 【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を指定してやれば、

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

すみません、ANo.2で誤記がありましたので訂正します。

> テキストボックスがネットスケープでテーブルをぶち抜いてしまう現象について

テーブルの幅を調整する場合、いろいろな条件により微妙に変わってしまうので、

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング