Engineers be ambitious!!: テーブルの高さ100%について

はまったのでメモ。

いまさらテーブルの入れ子を多用するデザインはないと思うけど、

仕事上、そういう修正もあると思う。

今回はテーブルの複雑な入れ子内で

テーブルのheight="100%"という指定をしたにもかかわらず、

親要素に対して100%にならないという現象に遭遇(IEで)。

IEの仕様なのかバグなのか

いろいろググってみると似たような境遇の人がちらほら・・・。

ありがとぅ～～～、グーグル様！

ポイントは二つ。

まずはDOCTYPE宣言 (説明略)

今回のhtmlは

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

のDOCTYPEが宣言されていたのだが、

この宣言をはずすとテーブルの高さが100%になった。

つまりw3Cの仕様に準拠すると

ブラウザ側(というかIE)ではテーブルの高さを

100%にしていても、trやらtdの中身で高さを決めているもよう。

ここでポイント2つめ。

なんのことはない。高さや幅を割合で指定する場合（xx%）、

その親の要素の高さやら幅から算出する。

たとえば親の高さが500px、子の高さが50%だった場合、

実際には子の高さは250pxとなる。

しかし、その親に高さ指定がない場合

その子要素の高さ指定はautoと解釈される。

今回はまったのは

テーブル構造の親の高さが100%、

またその親が100%

さらにまたその親が100%

さらにまたその親の親が100%

という指定がされていたために

ブラウザが高さを算出できず、autoという解釈をしていた。

そこで、１番親の要素に200pxを設定して解決。

めでたしめでたし・・・・・・

テーブル入れ子しすぎだろーーー(￣□￣;)!!

参考サイト）

Engineers be ambitious!!