我正在尝试布局一个
HTML表格(它是表格数据),它在Firefox 3.5和Chrome 2.0.172(EDIT和IE7 – 呈现像Chrome这样的表格)中的呈现方式不同.
我把桌子放在div里面：
<div id="listcontainer">
<table class="tasklist">
<colgroup>
<col class="narrow" />
<col class="wide" />
{{ more column definitions here }}
</colgroup>
{{ varIoUs code here }}
</table>
</div>
而且我有div和table的css：
div#listcontainer {
position: relative;
float: left;
width: 98%;
padding: 0;
border: 1px;
overflow-x: scroll;
}
table.tasklist {
width: auto;
table-layout: auto;
border: thin solid;
font-size: 9pt;
border-collapse: collapse;
empty-cells: show;
}
col.narrow {
min-width: 50px;
}
col.wide {
min-width: 200px;
}
在Firefox中,表格渲染比包含div更宽,div上的滚动条允许用户滚动到其他列(这是预期的操作).但是,Chrome和IE7似乎忽略了列的min-width属性,并将整个表格包含在包含div中.这不是我想要的.我究竟做错了什么？
编辑：我将最小宽度元素放在th和td元素本身而不是使用colgroup,然后它在所有三个浏览器中按预期呈现.使用cols,检查Chrome中的元素表示计算出的样式已经使列宽度适合div内部…
解决方法
我不知道chrome,但我相信IE7需要一个明确的“width：auto;”在元素上正确处理“最小宽度”.这似乎没有在msdn上记录,但它似乎出现在谷歌上.
http://blog.throbs.net/2006/11/17/IE7+And+MinWidth+.aspx
http://msdn.microsoft.com/en-us/library/ms530820(VS.85).aspx
(另外,对表和colgroup使用min-width有一些限制,所以你可能实际上无法实现.)
