表的布局问题 - 火狐与Chrome和IE7

我想布局中的HTML表格（这是表格数据），它是在Firefox 3.5和Chrome 2.0.172呈现不同（编辑和IE7 - 这使得Chrome等表一样）。表的布局问题 - 火狐与Chrome和IE7

我表一个div内：

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

而且我有CSS的div和表：

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似乎忽略了列的最小宽度属性，并将整个表格嵌入到包含div中。这是不是我想要的。我究竟做错了什么？

编辑：我穿上th和td元素本身，而不是使用COLGROUP的最小宽度的元件，然后将其呈现为预期在所有三个浏览器。使用列，检查在Chrome中的元素表明计算风格已使列宽度以适应DIV中...

来源

2009-07-04 Technical Bard