Mise en page automatique et colspan

Je crée une application qui permet à l'utilisateur de manipuler une structure de table en ajoutant et en supprimant des colonnes et des rangées, en définissant des largeurs de colonne et des colonnes et en insérant des éléments dans des cellules. Pendant le test, je suis tombé sur un scénario dans lequel Firefox 4 et Internet Explorer 8 restituent la table de la façon dont je m'attends à ce qu'elle soit restituée et pas Google Chrome 11. J'utilise table-layout: auto et je suis conscient que CSS ne spécifie pas un algorithme de rendu à utiliser dans ce cas (http://www.w3.org/TR/CSS21/tables.html, section 17.5.2.2). Néanmoins, j'aimerais avoir des points de vue cohérents dans les trois navigateurs mentionnés, si possible.Mise en page automatique et colspan

est ici un scénario très simple pour illustrer les différents rendu (essayez dans Chrome et Firefox/IE pour voir la différence): http://jsbin.com/ayuja4/3

Même si le tableau est assez large pour contenir la div bleu (parce que le premier la colonne est définie sur 200 px et la seconde colonne, bien qu'elle ait une largeur de 100 px, doit s'étendre à 300 px pour contenir la div verte), dans Chrome, la première colonne est élargie au-delà de ses 200 px. Il en résulte un espace supplémentaire inutile dans la dernière rangée, ce que j'essaie précisément d'éviter.

Des idées pour que cette table soit la même dans Chrome que dans Firefox et Internet Explorer? Je n'ai pas besoin d'une approche HTML/CSS pure - manipuler la table avec JavaScript est une option valide, si elle résout mon problème. J'envisage déjà d'utiliser une mise en page fixe, mais cela nécessitera un effort supplémentaire pour gérer des éléments plus larges que des colonnes, c'est donc un dernier recours.

Source

2011-05-13 rbarni

Semble être un bug dans Chrome, même IE 6 le fait bien. Signalez le bug, ils vont le réparer, les utilisateurs de Chrome recevront une mise à jour automatique (impossible à éviter sauf si vous ne vous connectez pas à Internet) et votre travail est terminé. – RobG

Je l'ai signalé via la fonction de rapport de bogue de Chrome. Malheureusement, cela signifie que je ne recevrai aucun commentaire. – rbarni

Si vous faites apparaître les divs à l'intérieur de la table sous forme de cellules avec table div {display:table-cell;}, vous obtiendrez les mêmes résultats. Aussi, la façon dont vous y parvenez maintenant est de laisser un écart de 1px parce que l'élément 500px n'obtient pas la frontière 1px calculée en elle.

En fait, j'ai fait un deuxième examen, et si vous utilisez min-width au lieu de width cela fonctionnera aussi.

Source

2011-05-13 03:34:21 iamnotoriginal

Si j'applique "display: table-cell" à toutes les divs du tableau, la première colonne s'étend au-delà de son 200 px prévu et la largeur de la seconde colonne devient inférieure à 300 px, et donc la largeur du div vert (300 px) n'est pas respecté (démo: http://jsbin.com/ayuja4/5). Cela se produit dans Chrome et Internet Explorer. Dans Firefox, les colonnes ont une largeur de 200 et 100 px, et donc aucune des div n'a sa largeur respectée. – rbarni

Si j'applique min-width au lieu de largeur, Chrome ne comprend toujours pas et Firefox et Internet Explorer rendent la table exactement comme si j'avais utilisé la largeur au lieu de min-width (démo: http://jsbin.com/ ayuja4/6). Mais si j'applique "display: table-cell" uniquement au div bleu, les trois navigateurs rendent la table comme je l'espère (demo: http://jsbin.com/ayuja4/7), donc c'est une solution satisfaisante. Merci pour votre réponse! – rbarni

Désolé, je n'étais pas clair. Je voulais dire que si vous appliquez 'min-width' aux' '' 'vous devriez corriger cela aussi ([http://jsfiddle.net/MKGwe/](http://jsfiddle.net/MKGwe/)). Heureux l'un d'eux a travaillé malgré ma pauvre explication, haha! – iamnotoriginal

Mise en page automatique et colspan

Répondre

Questions connexes