防止单元格扩大表格高度答案

【问题标题】：Prevent a cell from expanding table height防止单元格扩大表格高度
【发布时间】：2012-04-06 04:54:25
【问题描述】：

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

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

【问题讨论】：

标签： html css

【解决方案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 中没有任何东西（我还没有尝试过）。

【讨论】：

@CoryNelson 这意味着......？图片还在扩大表格吗？

【解决方案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');

【讨论】：

明确设置高度正是我想要避免的。我正在尝试使图像的高度等于表格高度（考虑其他行），而不再扩展它。
您可以随意设置高度。我将添加 JS 以展示如何将其从表中拉出。你需要一个明确的高度才能让溢出起作用。

【解决方案3】：

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

【讨论】：