- ベストアンサー
TABLE内のTABLEのHEIGHT属性が利かない
TABLEの中にTABLEを入れ子にしてHTMLを作ったのですが、 外のTABLEのHEIGHTを変動にして、内のTABLEのHEIGHTを100%にしてもHEIGHTがくっつきません。 検証したところ、IE5.0(Mac)は利くようですが、IE5.5(Win)は100%が利きません。 そういう仕様なのでしょうか？しょうがないのでしょうか？ それともCSSで解決できるものでしょうか？ ご存じの方いらっしゃいましたらご教授ください。 参考に、ソースをご覧ください。 <HTML> <HEAD> <TITLE>SAMPLE</TITLE> </HEAD> <BODY> <TABLE WIDTH="600" HEIGHT="600"> <TR> <TD> <TABLE WIDTH="500" HEIGHT="100%"> <TR> <TD>SAMPLE</TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML>
- megane
- お礼率74% (125/168)
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
TABLEタグにはCELLPADDINGという要素があり、 これは枠線から中身までの距離という意味があります。 質問の場合は設定されていないのでデフォルトの値が設定されています。 IE5.0(MAC)とIE5.5(WIN)ではその値が違うんでしょうね。 とにかく<TABLE WIDTH="600" HEIGHT="600"> にCELLPADDING要素を付け、 <TABLE WIDTH="600" HEIGHT="600" CELLPADDING="0">で 解決できるはずです。 雑な説明と思いますので、 とりあえずまったく同じことを懇切丁寧に書いてあるページを紹介します。
その他の回答 (2)
- dagtrio
- ベストアンサー率40% (19/47)
あのう・・・ サンプルのソースをコピペしてBORDERを１にしてブラウザで見てみたら・・・ ちゃんと １００％なんですが？？？ ちなみに、IE5.5 Win（Me）です (^_^;)
- sapari
- ベストアンサー率32% (32/100)
<TABLE WIDTH="600" HEIGHT="600">を <TABLE BORDER WIDTH="600" HEIGHT="600">に してみてはいかがでしょうか？
お礼
回答ありがとうございます。 BORDERは何か値を入れないのでしょうか？ ちょっと試してみたんですが、だめでした。 もうあきらめてきました。 そういう仕様なのだと。
関連するQ&A
- 入れ子にしたテーブルをheight100%にする
お世話になります。 以下のソースで、table2の高さを100％にしたいです。 この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか？？ ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- html {height:100%;} body {height:100%;} .th100 {height:100%;} --> </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- operaだとテーブルがなくなります
operaだテーブルがなくなります IEだと問題なく表示されるのに だれか助けてください style.css body{background-color:#ffff99;margin:0px; font-size:large; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive} .cur{font-family:cursive} .ser{font-family:serif} } table{background-color:#ff9933; width:100%; height:10% } .midori{background-color:#999933; width:100%; height:3.3% } ｈｔｍｌのほうは <HTML> <HEAD> <TITLE></TITLE> <link href="style.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <table><tr ><td></td></tr></table> <table class="midori"> <tr ><td></td></tr></table> <table style="height:6.7%"> <tr ><td></td></tr></table> <table style="position:absolute; left: 0px; bottom:8%; width:8%; height:100%; background-color:#993300"> <tr ><td></td></tr></table> <table style="position:absolute; bottom:0; height=8% " class="midori"> <tr ><td></td></tr></table> </BODY> </HTML> こんな感じなのですが どうしてでしょうか
- ベストアンサー
- HTML
- DreamWeaverで作るテーブル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> </head> <body> <table width="800" height="394" border="1" align="center"> <tr> <td> <p>1</p> <table width="200" border="1" align="left"> <tr> <td height="118">2</td> </tr> </table> <table width="600" border="1"> <tr> <td height="121">3</td> </tr> </table> <p> </p></td> </tr> </table> </body> </html> このようにテーブルを作った場合、3のセルの右のラインが1のセルの右ラインに隠れるというか見えなくなります。 そこで3のセルにalign="left"を設定するとIEではラインが見えるのですが、Netscapeでは2と3が縦に並んでしまいます。 なんとか3の右ラインを見えるようにしてNetscapeでも縦に並ばないようにするにはどうすればいいでしょう。 よろしくお願いいたします。
- ベストアンサー
- その他（インターネット・Webサービス）
- tableの中のtableの表示と外側（大きい方）のtableに背景画像を表示させる方法
非常にわかりにくいタイトルで申し訳ありません。tableの中にtableを入れて、外側（大きい方）のtableだけ背景画像を表示させたいのですがどのようにすればいいのでしょうか？下記ソースまでは作ったのですが、中（小さい方）のtableがなぜか右よりになってしまいます。小さいtableを真ん中にして、そのtableの周りを画像で囲みたいのですがどのようにすればいいのでしょうか？もちろん、下記ソースでなくても全然かまいません。htmlはまだまだ勉強中で詳しい方からすれば非常に見難いソースで申し訳ありませんが、ぜひお力添えいただけたらと思いますのでよろしくお願いします。 ↓ソース <html> <head> <body> <title>タイトル</title> <TABLE background="画像jpg"><TD width="10%" height="10%"><TR></TD><TD height="100%"></TD><TD width="100%" height="100%"><TD width="100%"><TD> <TABLE border width="600" height="100%" bgcolor="white"> <TR> <TD> 文章 </TD> </TR> </TABLE> </CENTER> </body> </html>
- ベストアンサー
- ブログ
- tableのheight指定が効かない
tableの高さを固定したく、heightとoverflowを指定したんですが、 tableに記述したソース分の大きさ（高さ）になり、スクロールバーが表示されません。 /*----外部CSS----*/ .sample{ color: #ffffff; background-color: #000000; height: 500px; width : 90%; overflow:scroll； } /*----ソース-----*/ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" type="text/css" hrefstyle.css"></head> <body> <table class="sample"><tbody><tr> <td class="a1"></td><td class="a0"></td><td class="a2"></td></tr><tr> <td class="a0"></td><td class="a0"> <div class="text">本文（heightが700pxくらいの内容）</div> </td><td class="a0"></td></tr><tr> <td class="a3"></td><td class="a0"></td><td class="a4"></td> </tr></tbody></table> ※tdのclassはテーブルのふちに用いてる画像を指定してあります。 </body> </html> 解決方法をご存知の方、よろしくお願いします。
- ベストアンサー
- HTML
- テーブルの位置
最初からテーブルを一番上に持ってくるにはどうしたら良いですか？ＣＳＳで設定するのでしょうか？ 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width=\"800\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" height=\"500\"> <tr bgcolor=\"#FFFF00\"> <td valigin=\"top\" valign=\"top\" colspan=\"4\" height=\"64\"> </tr> <tr> <td colspan=\"3\" height=\"2\"> </td> </tr> <tr> 【<td width=\"170\"> <table width=\"170\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\"> <tr> <td> </td> </tr> </table>】 </td> <td width=\"238\" height=\"352\"> </td> <td width=\"197\"> </td> </tr> <tr> <td colspan=\"3\"> </td> </tr> </table>
- 締切済み
- HTML
- テーブルの位置
最初からテーブルを一番上に持ってくるにはどうしたら良いですか？ＣＳＳで設定するのでしょうか？ 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width="800" border="1" cellspacing="0" cellpadding="0" height="500"> <tr bgcolor="#FFFF00"> <td valigin="top" valign="top" colspan="4" height="64"> </tr> <tr> <td colspan="3" height="2"> </td> </tr> <tr> 【<td width="170"> <table width="170" border="1" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table>】 </td> <td width="238" height="352"> </td> <td width="197"> </td> </tr> <tr> <td colspan="3"> </td> </tr> </table>
- ベストアンサー
- HTML
- テーブルの隙間をなくす
テーブルの中に作ったテーブルを一番上に配置したいのですが、どうすれば良いでしょうか？テーブルの下で改行すると上に行くのですが、それだとしたがあまります。 ＨＴＭＬはこれです。よろしくお願いします。 <table width="800" border="0" cellspacing="0" cellpadding="0" height="600"> <tr> <td> <TABLE width="100%"> <TBODY> <TR> <TD width="241" height="2"> </TD> <TD width="511" align="right" valign="bottom" style="font-size : 8pt;" height="2"> </TD> </TR> </TBODY> </TABLE> </td> </tr> </table>
- ベストアンサー
- HTML
- HTMLのソース
HPを今作ってますが、IEではまったく問題なく正常に表示されるのに、ネスケでは欠ける部分がでます。どちらかにしか対応しない独自拡張タグではなく、普通のテーブルです。以下がソースです。 <HTML> <HEAD> <TITLE>メイン</TITLE> </HEAD> <BODY bgcolor="000000"> <TABLE WIDTH=700 HIGHT=600 BORDER=1> <TABLE BORDER=1> <TR><TD WIDTH=600 HEIGHT=100>これはテスト表示です</TD><TD WIDTH=100 HEIGHT=100><IMG SRC=TOP2.GIF></TD> </TR> <TABLE WIDTH=700 HEIGHT=200 BORDER=1> <TD><IMG SRC=TOP1.JPG></TD> </TR> </TABLE> <TABLE WIDTH=700 HEIGHT=100 BORDER=1> <TD>これはテストです</TD> </TABLE> </TABLE> 上から８行目の ◎<TR><TD WIDTH=600 HEIGHT=100>これはテスト表示です</TD><TD WIDTH=100 HEIGHT=100><IMG SRC=TOP2.GIF></TD> のテーブルがネスケでは表示されず、下の二つしかでません。IEでは完璧です。いちおう。大きいテーブルに小テーブルを入れているのですが（慣れてないもんで、配置をはっきりさせるため）何か変ですか？まぁ慣れっこの人から見たら、変なとこ山盛りでしょうが、こんな簡単なテーブルで表示差があるとは思いません。どうでしょう？どなたかお時間のあるかたお返事まってます。大変たすかります。
- ベストアンサー
- HTML
お礼
回答ありがとうございました。 ちょっと質問がおおざっぱすぎてうまく伝わらなかったようです。 TABLE単独ではHEIGHTを100%にすると表示可能な範囲内で最大の高さで表示することが可能ですが、 それを入れ子にしたとたんHEIGHT（％指定）にかぎって利かなくなってしまうということを解決したいと思ったのです。 内側のTABLEのHEIGHTをpixで指定すれば利くことは利くのですが％にするとだめなのです。 質問で記載したソースをちょっとブラウザで見てみて下さい。 とても不思議な現象だと思うはずです。 ただ、解決法もなさそうなので半分あきらめています。
補足
補足ですが、 サンプルのソースのBOEDERを1にしてみて下さい。