我正在尝试布局一个 HTML 表格(它是表格数据),它在 Firefox 3.5 和 Chrome 2.0.172(编辑和 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 和表格的 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
(另外,对表和列组使用最小宽度有一些限制,所以你所追求的可能实际上是不可能的。)
关于css - 表格布局问题 - Firefox 与 Chrome 和 IE7,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1081380/