入れ子にしたテーブルをheight100%にする

解決済

質問者：awocamel
質問日時：2006/10/29 06:36
回答数：5件

お世話になります。
以下のソースで、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">

</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件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： picklse
回答日時：2006/10/29 21:54

こちらではうまく再現できないのですが、CSSの設定を次のようにしてみてください。

body {height:100%; margin: 0; padding: 0;}
.th100 {height:100%;}

これでも駄目なら。

table, tr, td {margin: 0; padding: 0;}

を追加してみる。

- 0
- 件

通報する

この回答へのお礼

たびたびありがとうございます。
とても心苦しいのですが、上記CSSでもうまく動きませんでした…

table2の高さが、一画面の高さまでにしかならず、
テキストが一画面より長い場合、余白が出来てしまうようです。
ウインドウを小さくすると、table2の高さも小さくなります。
height100%がtdに対してではなく画面（ブラウザ）のサイズになってしまっているのでしょうか。

通報する

お礼日時：2006/10/30 02:50

No.5

回答者： kosa
回答日時：2006/11/01 23:37

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

http://www.w3.org/TR/html4/loose.dtd">
↑
これが不要です。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
を削除したのですが、table1の上下に空白が出来てしまいます…

通報する

お礼日時：2006/11/03 07:50

No.4

回答者： matchasoft
回答日時：2006/10/30 11:47

テーブルのセルの高さを指定したい場合は、そのセルが属するtrタグの高さを変更する必要があります。

ですので、table2の高さを変更するだけでなく、そのテーブルが入っているセルのtrタグの高さも100%にしてみてください。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
すみません、trタグの高さを100%にしたのですが、変化がありませんでした。

table2の高さがウインドウに対して高さ100%になってしまいます。
table2の入っているセルに対して高さ100%にするにはどうしたらよいのでしょうか？？

通報する

お礼日時：2006/10/31 02:29

No.2

回答者： picklse
回答日時：2006/10/29 10:35

<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で確認してます。

この回答への補足

足りなかった情報をこちらで補足させていただきます。
環境はIE6、Firefox1.5です。
「長いテキスト」というのは60行くらい（一画面より長い）です。

補足日時：2006/10/29 19:55

通報する

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます！
教えていただいた方法を試してみましたところ、
テキストが短い場合にはうまくいってくれるのですが
テキストが長くなると（一画面より長くなると？）
table1とtable2の上下に余白が出来てしまいます。
どうしてこのようなことになってしまうのでしょうか…
せっかく教えていただいたのに申し訳ないです。

通報する

お礼日時：2006/10/29 19:49

No.1