2009-07-04 3 views
8

J'essaye de mettre en page un tableau HTML (c'est une donnée tabulaire) et ça fonctionne différemment dans Firefox 3.5 et Chrome 2.0.172 (EDIT et IE7 - qui rend la table comme Chrome Est-ce que).Problème de mise en page du tableau - Firefox par rapport à Chrome et IE7

J'ai la table dans 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 pour la div css 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, le tableau rend plus large que la div contenant, et la barre de défilement sur le div permet à l'utilisateur de faire défiler vers les colonnes supplémentaires (ce qui est l'action prévue). Cependant, Chrome et IE7 semblent ignorer la propriété min-width des colonnes et entasse toute la table dans la div contenant. Qui est pas ce que je veux. Qu'est-ce que je fais mal?

EDIT: je mets les éléments min largeur sur les éléments th et td eux-mêmes au lieu d'utiliser colgroup, et il rend comme prévu dans les trois navigateurs. L'utilisation de cols, inspectant les éléments dans Chrome indique que le a calculé le style a rendu les largeurs de colonne à l'intérieur de la div ...

Répondre

2

Je ne sais pas sur le chrome, mais je crois que IE7 exige une largeur explicite : auto; " sur les éléments pour qu'il gère correctement "min-width". Cela ne semble pas être documenté sur msdn, mais il semble venir sur google.

http://blog.throbs.net/2006/11/17/IE7+And+MinWidth+.aspx
http://msdn.microsoft.com/en-us/library/ms530820(VS.85).aspx

(En outre, il y a des contraintes sur l'utilisation min de largeur avec des tables et colgroups, donc ce que vous êtes après peut-être pas réellement possible.)

+0

ne contribue pas à ce cas. –

Questions connexes