防止单元格扩展表格高度

Question

I'm attempting to make an image take all the remaining width available for a table and span the entire height of a table without extending it any further, with overflow:auto to scroll if there's not enough height.

The width bit is easy, but no matter what I do the table cell containing the image will extend the height of the table. Is there a way to prevent this, short of explicitly setting the image's height?

Answer 1

Thus far the solutions I've found differ on browser, so aren't ideal. You could render different markup based on the client. (But still looking for a more universal answer.)

Updated again for the most universal solution so far:

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

Either works in Chrome, and the IE_CompatMode has to be added when IE has compatibility mode On.

<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>

And nothing (that I've yet tried) works in Firefox.

Answer 2

You would have to use a wrapper element around the content to restrict the height.

<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');

Answer 3

Could always give the image a percentage eg height="100%" that should make it the full size of the cell that it is in but would restrict overflow.