tableがbodyにはみ出る

2013/05/19 14:45

このQ&Aのポイント

質問文章でtableがbodyにはみ出てしまう問題について相談です。
right-box内のテーブルの行が増えると、tableがbodyにはみ出してしまいます。
heightを指定しないと表の行追加に合わせて可変にならないようです。どうすれば解決できるでしょうか？

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>

federan
お礼率25% (3/12)

HTML
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/05/19 16:43 回答No.1

floatを使わない。floatを使うと、その要素は他から独立してしまいます。そもそもHTMLおかしいし・・・ textareaがあるということは、formですか？table使う必要がありますか？ left-boxとかright-boxとか、端末によって下に回したりとかしたら名前と整合が取れなくなる。所詮、メインはtableですからその後に記述したので良い。　スタイルシートを利用できない端末や、検索エンジンにはこの情報はtableの後でよいはずです。floatを使うと文書の順番も変える必要が出てくる。 [サンプル]HTML4.01strict+CSS2.1 ★The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input ) ★W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) 　で検証済み!!のウェブ標準です。 ※タブは＿に置換してある。★必ず戻すこと★ 1) tableはstaticのままですから、それを含むsection(本文)はあわせて伸縮します。 2) 本文セクションのナビの高さはsectionの高さに合わせて伸縮します。　section{position:relative}　+ div.section div.nav{position:absolute;}なので 3) 将来navを上にしようが、左にしようが下にしようが・・自在にデザインできます。 4) 分かりやすいように背景は黄色にしてあります。 5) HTML5にするときは、そのままclass名を要素名に　<div class="header"></div>→<header></header> 　class名と使い道はHTML5に合わせてある。section,nav,footerも <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>本文</h2> ＿＿<form action="./"> ＿＿＿<table summary="form"> ＿＿＿＿<tbody> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<th abbr="name">お名前</th> ＿＿＿＿＿＿<td><input type="text" name="name" size="20" value=""></td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<th abbr="message">メッセージ</th> ＿＿＿＿＿＿<td><textarea rows="10" cols="40" name="m1"></textarea></td> ＿＿＿＿＿</tr> ＿＿＿＿＿ ＿＿＿＿＿<tr> ＿＿＿＿＿＿<th abbr="message">メッセージ</th> ＿＿＿＿＿＿<td><textarea rows="10" cols="40" name="m1"></textarea></td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<th abbr="message">メッセージ</th> ＿＿＿＿＿＿<td><textarea rows="10" cols="40" name="m1"></textarea></td> ＿＿＿＿＿</tr> ＿＿＿＿</tbody> ＿＿＿</table> ＿＿</form> ＿＿<div class="nav"> ＿＿＿<h3>その他の情報</h3> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>