如何混合使用相对和固定大小的列将表格宽度设置为 100%答案

【问题标题】：How to set table width to 100% with a mix of relative and fixed size columns如何混合使用相对和固定大小的列将表格宽度设置为 100%
【发布时间】：2012-07-05 21:08:51
【问题描述】：

我将此表格宽度设置为 100%。里面我有 3 列，中间的应该固定为 300px。左列和右列应在剩余空间中平均分配。

结果是带有图像的 col 被拉伸。如何解决此问题以使左右列保持相同大小？

http://jsfiddle.net/RqhCv/

重要提示：不要在左栏中添加任何内容，内容必须保持&nbsp;
也必须在IE7中工作

请不要发布有关 DIV 的答案。这个问题是关于表格的。

   <table style="width:100%;height:100%;">
        <tr>
            <td bgcolor="#FF0000">&nbsp;</td>
            <td bgcolor="#99CC33" style="width:300px;">this is 300PX</td>
            <td bgcolor="#0000FF"><img src="http://www.google.com/logos/2012/kondratyuk-12-hp.jpg" width="377" height="167"></td>
        </tr>
    </table>

...

我已经尝试了很多东西，包括 COLGROUP，但没有任何效果......

【问题讨论】：

还记得 Frames 的美好时光，那时您可以说 "*,300,*"？
重复stackoverflow.com/questions/7882979/…
@Umbrella 过去的日子已经一去不复返了。我所想的是遥远的未来，迟钝的 HTML 将被完全丢弃，取而代之的是新技术。从我们今天的情况来看，如果将 Apple Cocoa 移植到 Web 浏览器，它将成为 HTML 的绝佳替代品
@Rodolfo 感谢您的关心，我对那个问题中接受的答案投了反对票。

标签： html

【解决方案1】：

这似乎可以使左右列的大小相同，中间列 300 像素；。不过，我不确定您想对图像做什么。

<table style="width:100%;height:100%;table-layout:fixed;overflow:hidden" >
    <tr>
        <td bgcolor="#FF0000" style="width:50%;"></td>
        <td bgcolor="#99CC33" style="width:300px;"><div style="width:300px">this is 300PX</div></td>
        <td bgcolor="#0000FF" style="width:50%;" ><div style="overflow:scroll"><img src="http://www.google.com/logos/2012/kondratyuk-12-hp.jpg" width="377" height="167"></div></td>
    </tr>
</table>

【讨论】：

对不起，我忘了在 OP 中提到它必须在大多数浏览器中工作，直到 IE7。 min-width 不是一个选项。
对，我关于 IE7 不支持 min-width 的错误。您的答案仍然与我正在寻找的完全相反，因为我需要将 377 列的浏览器比例重新调整到零像素。
好的，我想我会再尝试一件事。我更改了 HTML 以允许 0px 调整左右列的大小。我不知道它是否适用于 IE7...
感谢您的努力，但您仍然不在。当您将浏览器大小调整为 400PX 时，图像出现在边缘后面，但底部没有滚动条可将图像滑入视图。我正在寻找一个真正的解决方案，而不仅仅是一个模拟修复。
那么，为什么不把 img 放在一个带有滚动条的 div 中让它滚动呢？它似乎是合法的 HTML/CSS 并在 Firefox 和 IE8 中工作。不确定您所说的模拟修复是什么意思。（没关系，我刚看到你对 div 的评论）

【解决方案2】：

经过几个小时的试验，我能够生成此代码。

适用于所有浏览器，在 Webkit 中稍微向左移动，但我认为我可以接受。

这看起来确实很危险，我一点也不喜欢它，但我在最新的 Crome、FF、Opera、IE9、IE8、IE7、Safari 和 iPad 上的 Safari 中进行了测试。看起来一切正常。

不过，如果有人对此或更好的解决方案有任何意见，请不要犹豫发布。

<table style="width:100%;height:100%;">
    <tr>
        <td bgcolor="#FF0000" style="width:50%;">&nbsp;</td>
        <td bgcolor="#99CC33" style="width:300px;"><img src="p.png" width="300" height="1"></td>
        <td bgcolor="#0000FF"  style="width:50%;"><img src="http://www.google.com/logos/2012/kondratyuk-12-hp.jpg" style="display:block;" width="377" height="167"></td>
    </tr>

</table>

【讨论】：