La disposition de Table de problème Firefox rapport à Chrome et IE7

Je suis en train de mise en page d'un tableau HTML (tableaux de données) et il est rendu différemment dans Firefox 3.5 et Chrome 2.0.172 (MODIFIER et IE7 - ce qui rend la table, comme le Chrome n').

J'ai le tableau à l'intérieur d'un div:

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

Et j'ai le code css de la div et de la table:

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

Dans Firefox, la table rend plus large que la div contenant, et la barre de défilement sur la div permet à l'utilisateur de faire défiler les colonnes supplémentaires (ce qui est le but de l'action). Toutefois, Chrome et IE7 semble ignorer le min-width propriété des colonnes et crams l'ensemble de la table dans le div contenant. Qui est pas ce que je veux. Ce que je fais mal?

EDIT: j'ai mis le min-width éléments sur la th et td éléments eux-mêmes au lieu d'utiliser colgroup, puis il rend comme prévu dans les trois navigateurs. À l'aide de cols, de l'inspection des éléments en Chrome indique que le calculé style a rendu les largeurs de colonne pour s'adapter à l'intérieur de la div...

OriginalL'auteur Technical Bard | 2009-07-04