- ベストアンサー
入れ子にしたテーブルを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>
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
こちらではうまく再現できないのですが、CSSの設定を次のようにしてみてください。 body {height:100%; margin: 0; padding: 0;} .th100 {height:100%;} これでも駄目なら。 table, tr, td {margin: 0; padding: 0;} を追加してみる。
その他の回答 (4)
- kosa
- ベストアンサー率25% (379/1464)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ↑ これが不要です。
お礼
回答ありがとうございます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> を削除したのですが、table1の上下に空白が出来てしまいます…
- matchasoft
- ベストアンサー率54% (20/37)
テーブルのセルの高さを指定したい場合は、そのセルが属するtrタグの高さを変更する必要があります。 ですので、table2の高さを変更するだけでなく、そのテーブルが入っているセルのtrタグの高さも100%にしてみてください。
お礼
回答ありがとうございます。 すみません、trタグの高さを100%にしたのですが、変化がありませんでした。 table2の高さがウインドウに対して高さ100%になってしまいます。 table2の入っているセルに対して高さ100%にするにはどうしたらよいのでしょうか？？
- picklse
- ベストアンサー率65% (26/40)
<td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> ↓↓ <td class="th100"><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> これでいかがでしょう。 当方IE6、Firefox1.5で確認してます。
お礼
回答ありがとうございます！ 教えていただいた方法を試してみましたところ、 テキストが短い場合にはうまくいってくれるのですが テキストが長くなると（一画面より長くなると？） table1とtable2の上下に余白が出来てしまいます。 どうしてこのようなことになってしまうのでしょうか… せっかく教えていただいたのに申し訳ないです。
補足
足りなかった情報をこちらで補足させていただきます。 環境はIE6、Firefox1.5です。 「長いテキスト」というのは60行くらい（一画面より長い）です。
- akuhijrwq
- ベストアンサー率35% (381/1064)
<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" height="100%"> こうでもだめなんですか？ あくまでcssにこだわりたいのかしら？
お礼
回答ありがとうございます！ 教えていただいた方法を試してみたのですが、cssの場合と変わりませんでした。すみません。 ちなみにcssでなくても構いません。 過去の質問を見るとみなさんcssでやってらっしゃったので、そのようにしてみました。
お礼
たびたびありがとうございます。 とても心苦しいのですが、上記CSSでもうまく動きませんでした… table2の高さが、一画面の高さまでにしかならず、 テキストが一画面より長い場合、余白が出来てしまうようです。 ウインドウを小さくすると、table2の高さも小さくなります。 height100%がtdに対してではなく画面（ブラウザ）のサイズになってしまっているのでしょうか。