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 ...
ne contribue pas à ce cas. –