[HTML] où il est question de tables, images et marges

Dev
1

Soit le code HTML suivant:

[code]
table.ratingtable { width: 700px;border: 2px solid #ffffff;border-spacing:0;border-collapse:collapse;font-weight:bold;text-align:center;color:#ffffff; }
table.ratingtable td{ border: 2px solid #ffffff;padding:4px 4px 2px 2px;font-size:11px; margin: 0 }
table.ratingtable td.RiskHeader { width:33% }
table.ratingtable td.highRisk { background-color:#ff0000 }
table.ratingtable td.medRisk { background-color:#ff6600 }
table.ratingtable td.lowRisk { background-color:#008000}

High Risk Medium Risk Low Risk
1 2 3 4 5 6 7 8 9 10
    X            
[/code]

Et le problème est que quelque soit la taille de l’image (même 1x1) sur la 3ième ligne, la colonne sera TOUJOURS plus large que les autres du même tiers. J’ai essayé sur IE, FF et même Chrome.

Ma question est donc: comment éviter ça?

2

Et j’imagine que le nombre de colonnes est donc variable ? Parce qu’un width: 11% sur High & Medium Risk corrigerait à priori le problème (Pour la dernière colonne, on est sur 8,35% environ)

3

Tout simplement (en mettant une largeur de 11 et 8.5) … putain :slight_smile:
Par contre j’aurais bien aimé comprendre pourquoi une simple image prend autant de place dans une cellule …

4

C’est lié à la manière dont les navigateurs déterminent la largeur des cellules.

Si tu n’indiques pas les valeurs, ils passent en mode “je me démerde”, fonction du contenu des cellules… Démarre alors tout un process où le navigateur tente de déterminer la largeur la plus optimisée fonction du contenu. Et du contenu, qu’il soit fixe ou non (comme une image) entrainera irrémédiablement l’agrandissement de ta cellule par rapport aux autres (qui n’en ont pas).

Si tu n’indiques pas explicitement de valeur, c’est que pour toi, ça n’a pas d’importance. Si tu souhaites un comportement précis, alors il te faut donner des indices au navigateur.

5

tu peux aussi essayer avec

table { table-layout: fixed; }