tableの中のdivタグをtdタグいっぱいまで広げる方法

tableタグの中でcolspanを使用しているtdタグをdivタグに置き換える際にはまった内容が解決したので、忘れないうちにメモ。

状況

tdタグの中のdivタグのheightを100%にしても高さが100%にならない。

対策

Google先生に教わったところ、table、td、divタグ全てをheight 100%にしなければならないとのこと。

でも実際は、、、

確かにdivタグはheight 100%になったけど、なぜか1行目だけ異常な高さになってしまった。2行目からは問題はない。

原因（というか考察）

どうもtableタグを100%に指定すると、最低限の高さが決められてしまう模様。その状況で、tdタグのheightを100%にすると、tableタグいっぱいの高さになる（これが1行目だけ異常な高さになる要因）。

解決策

調べても解決策が見つからなかったので、いろいろと試した結果、以下の方法で目的を達成することができました。

table.css

table {
  height: 0 auto;
}

table div {
  height: 100%
}

ええ、「width: 0 auto;」と一緒のことがheightでもできるってことです。tdタグのheight指定は不要です。

Chrome、FireFoxでの確認はOKでした。
IE?スマホサイトを想定してるので検証してません！

以上、はまっている方は参考にどうぞ。