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

Question

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

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

http://jsfiddle.net/RqhCv/

重要提示：不要在左栏中添加任何内容，内容必须保留 
也必须在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，没有任何效果......

Answer 1

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

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

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