tableがbodyにはみ出る

2023/09/05 01:57

このQ&Aのポイント

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

ベストアンサー

tableがbodyにはみ出る。。

2013/05/19 14:45

文章での質問で恐縮ですが、 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>

関連するQ&A

初心者です。floatでレイアウトしてるのですが、縦線とテーブルの間を広げる方法がわかりません
floatでレイアウトしてるのですが、縦線とテーブルの間を広げる方法がわかりませんメニューとコンテンツが縦線で区切られてるのですが右側のテーブルと縦線が合体してしまいます。縦線とテーブルの間に少し隙間を作りたいのですが、どうすればいいでしょうか？ HTMLとCSSを書いておきます。よろしくお願いします。・HTML <div id="contents"> <table> <tr> <td>×</td><td><p>あああ</p> </tr> <tr> <td>○</td><td><p>いいい</p> </tr> <tr> <td>■</td><td><p>ううう</p> </tr> </table> <br><br> a </div> <div id="left-menu"> <ul> <li><a href="index.html" class="a8">メニュー</a></li> <li><a href="league.html" class="a8">メニュー</a></li> </ul> </div> <div id="footer"> ああああああ </div> ・CSS body { width: 900px; } #contents { float: right; width: 740px; border-left: 1px solid #999;} #left-menu { float: left; width: 150px;} #footer { clear: both; }
- 締切済み
- HTML
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
CSSで高さ100％のレイアウト
テーブルを使用せずCSSでのレイアウトなのですがフッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか？他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。
- ベストアンサー
- CSS
DreamWeaverでテーブルをCSSにした場合にずれます。
DreamWeaverを使い始めました。 CSSの段組左にテーブルを入れると下記のようになりました。 ----------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="wrap"> <div id="content"> <table width="200px" border="0" cellspacing="0" cellpadding="0"> <tr> <td>1段</td> </tr> <tr> <td>2段</td> </tr> </table> </div> <div id="main">メインメインメインメインメイン</div> <div id="footer"> 下</div> </div> </body> </html> -----↑ここまでDreamWeaver そこで、CSSでテーブルにボーダー0の値を入れて、タグからborder="0"を消すと、段組右側が左の下にずれて表示されます。ブラウザプレビューでは正常ですが、編集しにくくて困ってます。 table { border: none; border-collapse: collapse; } DWでは、このようになるものなのでしょうか。
- ベストアンサー
- HTML
cssのfloatについて質問があります。
cssのfloatについて質問があります。 floatがなかなか理解できずに悩んでおります。下記のようなcssがあり、同じブロック要素でも table,pなどは右に回りこみ、divボックスはfloatを指定しないと floatボックスの下に入ってしまうのをなんか理解できません。初歩的なことかもしれませんが、どなたかアドバイスいただけると助かります。宜しく尾根会い致します。 <html lang="ja"> <head> <title></title> <style type="text/css"> #con { width: 800px; border: solid 1px black; } .left { width: 300px; height: 300px; float: left; border: solid 1px blue; } .right { width: 200px; height: 200px; border: solid 1px red; } table { width: 100px; height: 100px; border: solid 1px green; } p { border: solid 1px yellow; } </style> </head> <body> <div id="con"> <div class="left"> </div> <table> <tr><td>TABLE</td></tr> </table> <p>ppppp</p> <div class="right"> </div> </div> </body> </html>
- ベストアンサー
- HTML
tableにtable。table同士の間隔を拡大
スクロールバーを付けるためにtable内にtableを入れました。中のtableとtableの間隔を開けたいです。言葉が少ないですが、その分画像で頑張って説明します。お願いいたします。 <style type="text/css"> #test0{ cellpadding: 2; width: 518px; background-color : #fff; border:1px solid #333; border-spacing:0; } #start{ width: 495px; height: 230; border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } .center{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } #end{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #40ee22; } td.test1{ background-color: #000000; color: #333333; } td.test2 img{ margin: 10px; } .test3{ font-size: 12px; padding: 5px; } td.test4{ text-align: center; } </style> <table id="test0"> <tbody> <tr> <td> <DIV style="height:400px; overflow:auto;"> <table id="start"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table class="center"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table id="end"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> </div> </td> </tr> </tbody> </table>
- ベストアンサー
- HTML
CCSを使ってTABLEタグをやめたい。
初心者です。よろしくお願い致します。現在 <table width="99%"> <tr> <td width="85"></td> <td></td> <td width="80"></td> <td width="70"></td> <td width="70"></td> </tr> </table> のテーブルタグを外しCSSで同じように再現できないか苦戦しています。自分なりに #table {width: 99%; } #A{ width: 85; float: left; } #B{ float: left; } #C{ width: 80; float: left; } #D{ width: 70; float: left; } #E{ width: 70; float: left; } として <div id="table"> <div id="A"></div> <div id="B"></div> <div id="C"></div> <div id="D"></div> <div id="E"></div> </div> としてみたのですが、いまくいきません。もしご存知の方がいましたら是非教えてください。よろしくお願いいたします。
- ベストアンサー
- HTML
wrapperなしでCSSのレイアウトは組まない方がいいですか？
いつもお世話になっております。実はふとした疑問というか挑戦といいますか・・・いつもはとあるサイトさんからダウンロードしたテンプレートの枠組みを使用していたので、余り気にしていなかったのですが、今回フッター部分もヘッダー部分と同様にrepeat-xをして永遠に延長したデザインを作りたいと考えています。ヘッダー部分は背景を上に合わせて作れば問題ないと思うのですが、フッター部分はページごとに縦の長さが違うためそれぞれ別のスタイルシートを要するのもなんとなくやめたほうがいいようなきがしています。そこでいつもはwrapperで囲っていたためにヘッダー部分しか横軸を延長できなかったのですが、フッター部分だけをwarapperからはずして延長させたいとおもっています。これは可能でしょうか？どうかよろしくお願いいたいします。 body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#CC9999; } /* 左側の設定*/ #left{ width:190px; height:550px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:600px; height:550px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:50px; background-color:#CCFFCC; clear:both; } ------------------------------------- <body> <DIV id="wrap">  <div id="head"> </div>  <div id="left"> </div>  <div id="right"> </div>  <div id="foot"> </div> </DIV> </body> ------------------------------------------------- これを・・・ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#CC9999; } /* 左側の設定*/ #left{ width:190px; height:550px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:600px; height:550px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:50px; background-color:#CCFFCC; clear:both; } ------------------------------------- <body> <DIV id="wrap">  <div id="head"> </div>  <div id="left"> </div>  <div id="right"> </div>  <div id="foot"> </div> </DIV> <div id="foot"> </div> </body> ------------------------------------------------- このようにwrapperからはずしてレイアウトすることは可能でしょうか？色々いじっているとなんとか見た目はできたのですが、縮小するとフッターが真ん中あたりに来たり、なにかと不安でして・・・かなり長文になりましたが、どうかよろしくお願いたします。
- ベストアンサー
- HTML
CSSレイアウトでフッターをうまく配置出来ません。
CSSで初めてレイアウトしていますが、テキストがふえた場合、フッターが文章部分と重なってしまいます。文章部分が増えた分だけ、フッターの位置を自動的にずらすようにしたいのですが・・・floatで作り変えを考えていますが、今のやり方で出来るのかどうか、どうしても確認したいのです。どうぞ宜しくお願い致します。以下サンプルのソースです。 <body> <div id="layout"> <div id="header"> <h1><img src="img/co.gif"></h1> </div> <div id="mainarea"> <div id="navi"> <h2><img src="img/button.gif"></h2> <ul> <li class="naviatem">メニュー</li> </ul> </div> <div id="main"><img src="img/contact.jpg"></div> <div id="scontents"> <form> <table width="90%" cellpadding="0" cellspacing="2" border="0"> <tr> <td class="contact">内容</td> <td class="contact1"><textarea cols="50" rows="10"></textarea></td> </tr> </table> </form> </div> </div> <div id="footer"> <p>フッター部分</p> </div> </div> </body> -------CSS------------- #layout{ width: 750px; height: 100%; margin-left: auto; margin-right: auto; } #header{ width: 750px; height: 63px; margin: 0px; } #mainarea{ margin-top: 16px; width: 750px; height: 100%; } #navi{ width:　183px;　 margin-left: 3px; } #main{ position:absolute; width: 561px; margin-left: 189px; top: 81px; } #footer { margin: 30em 0 0 0; width: 750px; border-top: 1px solid #666666; position : relative; z-index: 1; } #scontents{ position:absolute; margin-left: 192px; top: 250px; width: 553px; }
- ベストアンサー
- CSS
親要素の除去(Jqueryのunwrapメソッド)
jquery のunwrapメソッドを使用して下記コードを作成しました。「div#wrap1」の配下に「div#wrap2」、「div#wrap3」「div#wrap4」3つのdiv要素がありその3つの要素それぞれの配下にはテーブル(3つとも同じ名前のテーブル)が存在しています。ボタンを押下すると「div#wrap1」、「div#wrap2」、「div#wrap3」「div#wrap4」を全て除去し、テーブルも1つだけ残すコードを書きました。しかし、ボタン押下後、IEの開発者ツールでHTMLを確認するとテーブルは１つだけ残っているのですが「div#wrap1」配下に存在しています。コード中ではテーブルが残り1つになったテーブルに対して$(this).unwrap()とやっているのですがこれがうまくいっていないようです。原因がわかられる方はいらっしゃいますでしょうか。 <html> <head> <meta charset="UTF-8" /> <script src="jquery-1.9.1.js"></script> <script> $(function () { $( "#add" ).click(function () { if($("table[name='tblList']").length > 1) { // tableの親要素「div#wrap2」、「div#wrap3」「div#wrap4」を除去 $("table[name='tblList']").unwrap(); $("table[name='tblList']").each(function(){ // 「name='tblList'」のテーブルを削除 $(this).remove(); //「name='tblList'」のテーブルが残り1つの場合 if($("table[name='tblList']").length == 1) { // tableの親要素「div#wrap1」を除去 $(this).unwrap(); return false; } }); } }); }); </script> </head> <body> <input type="button" id="add" value="行追加"> <div id="wrap1"> <div id="wrap2"> <table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList"> <thead> <tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr> </thead> <tbody> <tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr> <tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr> <tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr> </tbody> </table> </div> <div id="wrap3"> <table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList"> <thead> <tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr> </thead> <tbody> <tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr> <tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr> <tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr> </tbody> </table> </div> <div id="wrap4"> <table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList"> <thead> <tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr> </thead> <tbody> <tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr> <tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr> <tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr> </tbody> </table> </div> </div> </body> </html>
- ベストアンサー
- JavaScript