html - 防止单元格扩大表格高度

Question

我正在尝试使图像采用表格的所有剩余宽度并跨越表格的整个高度而不进一步扩展它，如果没有足够的高度，则使用溢出：自动滚动。

宽度位很容易，但无论我做什么，包含图像的表格单元格都会扩展表格的高度。除了明确设置图像的高度之外，有没有办法防止这种情况发生？

Answer 1

到目前为止，我发现的解决方案在浏览器上有所不同，因此并不理想。您可以根据客户端呈现不同的标记。（但仍在寻找更普遍的答案。）

再次更新了迄今为止最通用的解决方案：

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

两者都可以在 Chrome 中使用，并且当 IE 的兼容模式为 On 时，必须添加 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

您必须在内容周围使用包装元素来限制高度。

<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

总是可以给图像一个百分比，例如 height="100%" 这应该使它成为它所在的单元格的完整大小，但会限制溢出。