Safariでテーブルのセルの高さを均等にしたい

質問

Safariです（ちなみに見ているバージョンは４）

<table>
<tr>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>

このような、片方が結合しているテーブルで、
隣のセルの高さを均等にしたいのです。
ほかのブラウザでは良いのですが、
Safariだとどうしても上が短く、下が長くなってしまいます…
CSS等で均等にできないでしょうか？？
試しにheight:50%;にしましたがなりませんでした。

回答No.1

abril · ベストアンサー

> 試しにheight:50%;にしましたがなりませんでした。

この場合、考えなければいけないのは”50%”というのは「どこの高さに対する”50%”なのか？」という事です。
例えば2000円の品物がセールで「50%OFF！」と銘打ってあったら、2000×0.5＝1000、で1000円という値が出ます。しかし、元値が書いてなかったらいくらになるのかわからないですよね？それと同じ事が言えます。ただ、漠然とtdだけに%だけ指定しても、実際にはどの様な描画領域になるのかわからない状態になります。

下記の様な簡単なサンプルで検証してみました。

【HTML】

<table class="hoge" cellspacing="0" cellpadding="0" border="1" summary="概要">
<tr>
<td class="data">上のセル</td>
<td rowspan="2">結合セル</td>
</tr>
<tr>
<td class="data">下のセル（データ量は上のセルより多い）</td>
</tr>
</table>

【CSS】

table.hoge td.data {
width: 100px;
height: 50%;
}

で、更にCSSには

【A】
table.hoge {
width: 200px;
height: 100px;
}

というtableのスタイルが設定されているとします。
この場合、tableの高さ100pxに対して、行が2行でそれぞれのセルの高さが50%、というと100px×0.5＝50pxという事で計算が合うので、大抵のブラウザ（Safariは4ではなく3しかないですが）では均等に見えていると思います。無論ですが、3行以上だったら均等にはなりません。
＃ただし、セルの中のデータの相対量が結果として50pxを超える場合は、無視してセルの高さをデータが収まりきるまで伸ばします。
＃これは変え様がありません。tableのtd要素におけるheightとは、表のセルという性質上、min-height（最低限の高さを保証し、データ量がそれを超える場合は自動的に伸びる）と同じ挙動になるからです。

ですが、この指定が

【B】
table.hoge {
width: 200px;
height: 100%;
}

となっていたら、【A】とは異なり、tdの高さは完全に内包するデータ量で成り行きになります。この場合のtableのheight: 100%;というのは何も指定していない時と同じ（厳密に言うと、一部の環境・条件下ではその限りではないのですが、そこはややこしくなるので無視しておきます。）、セルの内容の量に応じて自動で伸縮するからです。子要素（td）の高さに親要素（table）の高さが依存しています。

ちなみに、この問題は先の質問（質問番号：5087743）のNo.3様のご回答のでJavaScriptを使う事で解決したのではなかったのですか？

お礼

丁寧な解説ありがとうございます！

前の質問（5087743）はIEでセルの高さを「固定」したかったもので、これとは違います。