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内部…