Interopérabilité - Hauteur de ligne tabulaire

Bonjour à vous,

Je me suis heurté de nombreuses fois au même problème, peut-être avez-vous un avis à ce sujet :

Admettons un tableau de données où les cellules possèdent à la fois une hauteur identique (height:xx px), un padding pour éviter que le texte ne se cogne aux bordures et un vertical-align top afin de prévoir une seconde ligne de texte sans que celle ci se retrouve décalée par rapport aux autres lignes de textes du tableau.

.montableau th, .montableau td {
    height:40px;
    padding:5px;
    vertical-align:top;
}

Selon cette configuration, Firefox et Opera semblent être les seuls à ne pas additionner le "padding" au "height" pour le calcul de hauteur de cellule. Safari et IE toutes versions en revanche additionnent les padding haut et bas à la hauteur désignée ...Ce qui a pour conséquence de créer une différence de hauteur de ligne entre Firefox/Opéra et les autres plutot forte et particulièrement gênante.

Firefox + Opéra : Hauteur réelle = 40px
Safari + IE : Hauteur réelle = 50px (5+5+40)

Si jamais vous connaissez une solution, je suis assez preneur.
Modifié par Nigel (11 Nov 2010 - 12:25)

Ah oui, tiens.

J'ai l'impression que Firefox et Opera traitent height comme un équivalent de min-height pour les cellules de tableau. Je ne saurais dire qui a raison car CSS 2.1 zappe la question du padding dans le calcul de la hauteur des cellules:

http://www.w3.org/TR/CSS2/tables.html a écrit :
In CSS 2.1, the height of a cell box is the maximum of the table cell's 'height' property and the minimum height required by the content (MIN). A value of 'auto' for 'height' implies that the value MIN will be used for layout.

Pour une solution: est-ce que tu peux arriver à l'effet souhaité avec un min-height à la place de height? J'ai fait un test rapide et avec min-height le comportement est similaire entre FF4 et Chrome 7.

Oui, c'est curieux.

Alors, j'ai eu le même réflexe de tenter min-height, mais visiblement cette propriété n'est pas reconnue pour les cellules de tableaux sur FF3, Safari 5 et IE. A ce moment là j'ai abandonné l'idée.

Pour le moment j'ai dû appliquer un hack pour FF ( ) en désespoir de cause en attendant de trouver un moyen "propre" d'obtenir le rendu souhaité... Si tant est qu'il existe !

Bonjour,

est-ce que tu as le même phénomène avec

table-layout: fixed;

? Si ton tableau doit rester flexible (d'une page à l'autre, selon le contenu, ...), c'est évidemment pas une bonne idée.

Oui, j'utilise très rarement des tableaux en

table-layout:auto;

A vrai dire, le problème est le même que ce soit en auto ou en fixed.

Bon, après il y a le DIV ou SPAN avec min-height dans la cellule du tableau... Pas propre, peut-être pas possible dans ton cas.

Pas con, c'est effectivement possible, il suffirait de l'appliquer uniquement sur chaque <th scope="row" ..>, sans définir de hauteur aux cellules.

C'est pas idéal, mais un span peut toujours être utile à l'avenir, comme rajouter une icone déclenchant une info-bulle au survol pour plus de détails concernant le libellé de la ligne (par ex)...

Ca reste un peu de la bidouille mais pas le choix
On va dire que c'est toujours mieux qu'un hack Firefox...

Je prends !