テーブル内のテーブルの高さを揃えたい。

質問

CGIの表示部分を改造中です。
下のソースをhtmlファイルにして見てもらったら判ると思うのですが、

<TABLE border="0">
<COL span="4" width="50">
<TR>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">こんな風に</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">枠を置いたときに</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

高さを100%にしても広がりませんでした。
どうにかして高さ(下の位置)を揃えることは出来ないでしょうか?

回答No.3

leap_day · ベストアンサー

こんにちは

一番上の<table>にheight指定してやってください（＾＾）

<TABLE border="0" height="100">
<COL span="4" width="50">
<TR>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">こんな風に</TD>
以下続く・・・

回答No.5

noname#56851

一番外側のテーブルに高さ指定をしないと、何に対しての100％かがあいまいになるので揃わないのではないでしょうか。

<TABLE border="2" height="25%">
<COL span="4" width="50">
<TR>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">こんな風に</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">枠を置いたときに</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

外側のボーダーは分かりやすくちと太く表示しときました。

お礼

ありがとうございました。
外枠に高さ指定することで、ちゃんと設定できました。

回答No.4

naokita

＃１　naokitaです（補足への返信）
それならセル枠のborderだけ設定し隙間を開ける。
枠とのスペースだけの為に莫大なtable設定をするよりも、簡潔にtableは１つに統一。
（背景が白の場合は下記の　background: #fff　は不要）
-----------------------------------------

<table cellpadding="0" cellspacing="4">
<tr valign="top">
<td style="width: 48px; border: 1px solid #ccc; background: #fff">こんな風に</td>
<td style="width: 48px; border: 1px solid #ccc; background: #fff">枠を置いたときに</td>
<td style="width: 48px; border: 1px solid #ccc; background: #fff">100%のサイズ指定しても合わない高さを</td>
<td style="width: 48px; border: 1px solid #ccc; background: #fff">ちゃんと揃えて配置したい</td>
</tr>
</table>

------------------------------------------
ＣＳＳでtd指定もしくはクラス指定するともっと短縮。
td {
width: 48px; border: 1px solid #ccc; background: #fff }

回答No.2

maura

<style>
TD{ height=100%;}
</style>

補足

返答ありがとうございます。
しかし、変化無しです。
他の方法はありませんか?

回答No.1

naokita

単純にこんな感じですか？（意味が違ったら申し訳ない）

<TABLE cellpadding="1" cellspacing="1" bgcolor="#cccccc">
<TR bgcolor="#ffffff" valign="top">
<TD width="50">こんな風に</TD>
<TD width="50">枠を置いたときに</TD>
<TD width="50">100%のサイズ指定しても合わない高さを</TD>
<TD width="50">ちゃんと揃えて配置したい</TD>
</TR>
</TABLE>

補足

すみません。ちょっと意味が違います。
テーブルの中にさらにテーブルを入れる必要があります。
その内側のテーブルの高さを指定したいです。
テーブルの中にテーブルとした理由は、枠と枠の間の空白が必要だったからです。

他の方法があればお願いします。