Question

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

结果是带有图像的col被拉伸。如何解决这个问题，以便左右两个cols保持相同的大小？

重要说明：请勿向左栏添加任何内容，内容必须保持 
也必须在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中略微向左移动，但我认为我可以忍受。

这看起来很危险，我根本不喜欢它，但我在iPad上测试了最新的Crome，FF，Opera，IE9，IE8，IE7，Safari和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>

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

2 个答案: