表的佈局問題 - 火狐與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