css - 表格布局问题-Firefox与Chrome和IE7

我正在尝试布局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需要一个明确的“宽度:自动；”；正确处理“最小宽度”的元素。这似乎没有在msdn上记录，但是似乎在google上出现了。

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/