html - セルがテーブルの高さを拡張しないようにする

Question

テーブルで利用可能な残りの幅をすべて取得し、それ以上拡張せずにテーブルの高さ全体にまたがるように画像を作成しようとしています。高さが足りない場合は、overflow:auto でスクロールします。

幅ビットは簡単ですが、何をしても、画像を含む表のセルが表の高さを拡張します。画像の高さを明示的に設定する以外に、これを防ぐ方法はありますか?

Answer 1

これまでのところ、私が見つけたソリューションはブラウザーによって異なるため、理想的ではありません。クライアントに基づいて異なるマークアップをレンダリングできます。（しかし、より普遍的な答えを探しています。）

これまでで最も普遍的なソリューションのために再度更新されました。

<style>
    div.ImageBlock
    {
        height:100%;
        width:100%;
        left:0px;
        top:0px;
        overflow:auto;
    }
    div.IE_CompatMode
    {
        position:absolute;
    }
</style>

どちらも Chrome で動作し、IE の互換モードがオンの場合は IE_CompatMode を追加する必要があります。

<td rowspan="2" style="position:relative;">
    <div class="ImageBlock [conditional:]IE_CompatMode">
        <img src="Images/Jellyfish.jpg" style="position:absolute; top:0px; left:0px;" />
    </div>
</td>

そして、Firefoxでは何も（私がまだ試したことはありませんが）機能しません。

Answer 2

常に画像にパーセンテージを与えることができます。たとえば、 height="100%" のようにすると、画像が含まれるセルのフルサイズになりますが、オーバーフローは制限されます。

Answer 3

高さを制限するには、コンテンツの周りにラッパー要素を使用する必要があります。

<table>
    <tr>
        <td><div class="overflow">This is short.</div></td>        
        <td><div class="overflow">This is longer.</div></td>   
        <td><div class="overflow">This is really long and repeated. This is really long and repeated.</div></td>           
    </tr>
</table>

.overflow {
    max-height:40px;
    overflow:hidden;
}

var tableHeight = $('table').height();
$('.overflow').css('height',tableHeight + 'px');