Css 表布局问题-Firefox与Chrome和IE7

我正在尝试布局一个HTML表格（它是表格数据），它在Firefox 3.5和Chrome 2.0.172中的呈现方式有所不同（编辑和IE7-它像Chrome一样呈现表格）

我把桌子放在一个小隔间里：

<div id="listcontainer">
  <table class="tasklist">
    <colgroup>
      <col class="narrow" />
      <col class="wide" />
      {{ more column definitions here }}
    </colgroup>
{{ various code here }}
  </table>
</div>

在Firefox中，表格呈现的宽度大于包含的div，div上的滚动条允许用户滚动到其他列（这是预期的操作）。然而，Chrome和IE7似乎忽略了列的min-width属性，并将整个表填充到包含的div中。这不是我想要的。我做错了什么

---

EDIT:我将minwidth元素放在

th

和

td

元素上，而不是使用colgroup，然后在所有三个浏览器中按预期呈现。使用cols，检查Chrome中的元素表明计算的样式已将列宽渲染为适合div的宽度。

我不知道Chrome，但我相信IE7需要在元素上明确显示“宽度：自动”，以便正确处理“最小宽度”。这似乎并没有在msdn上记录，但它似乎出现在谷歌上

（另外，在表和列组中使用min width时存在一些限制，因此您所追求的可能实际上是不可能的。）

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