Rendu de colspan par IE8 incorrect ?

[JalilArf]

Bonjour,

J'ai un problème avec ce tableau HTML, qui est interprété différemment suivant les navigateurs :

Chrome and Outlook affichent le rendu que j'attends, c'est-à-dire où les 2èmes cellules des 2ème et 3ème lignes passent au dessus de la 4ème cellule des lignes 4 à 10 :



Internet Explorer 8 and Opera 10 affichent un rendu différent, ou la 4ème cellule des lignes 4 à 10 ne commence qu'après les 2èmes lignes des lignes 2 et 3 :



Une idée de la raison de cette différence d'interprétation de mes colspans / rowspans ?
Qui a raison ?
Comment puis-je arranger mon code pour que tout le monde l’interprète comme Chrome ?

Mon code actuel :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<table border=0 cellspacing=0 cellpadding=0 width=400 style='width:300pt;border-collapse:collapse;border:1px solid black;'>
     <tr style='height:9.75pt'>
      <td colspan=6 valign=top style='border:1px solid black;height:9.75pt;width:300pt;' width="400px">
      </td>
     </tr>
     <tr style='mso-yfti-irow:1;height:12pt' height="16px">
      <td rowspan=9 valign=top style='border:1px solid black;border-top:1px solid black;height:12pt;width:14.25pt' width="19px">
      </td>
      <td bgcolor="red" colspan=3 valign=top style='border:1px solid black;height:12pt;width:203.25pt;' width="271px">
      </td>
      <td rowspan=2 valign=top style='border:1px solid black;height:12pt;width: 72pt' width="96px">
      </td>
      <td rowspan=2 valign=top style='border:1px solid black;height:12pt;width:10.5pt' width="14px">
      </td>
     </tr>
     <tr style='mso-yfti-irow:2;height:12pt' height="16px">
      <td bgcolor="red" colspan=3 valign=top style='border:1px solid black;height:12pt;width:203.25pt;' width="271px" height="16px">
      </td>
     </tr>
     <tr style='mso-yfti-irow:3;height:3.75pt' height="5px">
      <td colspan=2 valign=top style='border:1px solid black;height:3.75pt;width:170.25pt' width="227px" height="5px">
      </td>
      <td colspan=3  rowspan=7 valign=top style='border:1px solid black;height:3.75pt;width:115.5pt' width="154px">
      </td>
     </tr>
     <tr style='mso-yfti-irow:4;height:11.25pt' height="15px">
      <td valign=top style='border:1px solid black;height:11.25pt;width:27.75pt' width="37px">
      </td>
      <td valign=top style='border:1px solid black;height:11.25pt;width:142.5pt' width="190px">
      </td>
     </tr>
     <tr style='mso-yfti-irow:5;height:11.25ptpt' height="15px">
      <td valign=top style='border:1px solid black;height:11.25pt;width:27.75pt' width="37px" height="15px">
      </td>
      <td valign=top style='border:1px solid black;height:11.25pt;width:142.5pt' width="190px" height="15px">
      </td>
     </tr>
     <tr style='mso-yfti-irow:6;height:3.75pt' height="5px">
      <td colspan=2 valign=top style='border:1px solid black;height:3.75pt;width:170.25pt' width="227px">
      </td>
     </tr>
     <tr style='mso-yfti-irow:7;height:11.25pt' height="15px">
      <td colspan=2 valign=top style='border:1px solid black;height:11.25pt;width:170.25pt' width="227px" height="31px" >
      </td>
     </tr>
     <tr style='mso-yfti-irow:8;height:23.25pt' height="31px">
      <td colspan=2 valign=top style='border:1px solid black;height:23.25pt;width:170.25pt' width="227px">
      </td>
     </tr>
     <tr style='mso-yfti-irow:9;mso-yfti-lastrow:yes;height:50.25pt' height="67px">
      <td colspan=2 valign=top style='border:1px solid black;height:50.25pt;width:170.25pt' width="227px">
      </td>
     </tr>
    </table>

[Vil'Coyote]

alors oui c'est normal et donc l'utilisation de rowspan ainsi que de colspan est à éviter.
soit utilisation de div soit des tableau dans des tableau. donc revoir ton découpage.

[JulienC]

Bonjour,

Ouhhh... compatibilité Outlook

C'est certain qu'il n'est pas conseillé d'utiliser simultanément des rowspan et colspan.

Cependant, pour un tableau aussi tordu, tente le tout pour le tout :
déporte toutes tes mesures "width" dans des balises <col>.

Sauf erreur de ma part, il faudrait donc ajouter juste après <table...> :

Code :

1
2
3
4
5
6
<col width="19px"/>
<col width="37px"/>
<col width="190px"/>
<col width="44px"/>
<col width="96px"/>
<col width="14px"/>

En effet, apparemment, la largeur de ta 4ème colonne n'est jamais définie explicitement.

Vois ce que ca donne.

[JalilArf]

Merci JulienC.

En effet, ça a marché mieux en précisant les balises <col>.
J'ai également du préciser table-layout:fixed sur la table.

Après ça mon exemple simplifié marchait bien dans les navigateurs mais j'ai enchaîné les galères sur les différentes messageries.

J'ai finalement refait toute ma signature avec 4 ou 5 tableaux imbriqués plutôt que des col/rowspans. Horrible.

Merci pour l'astuce, que je garde en tête pour la prochaine fois :-)

[JalilArf]

Mais quand même au passage, je ne vois pas pourquoi il n'est pas conseillé d'utiliser simultanément rowspans et colspans, ça reste quand même des mathématiques assez simples ...

Je trouve ça dingue que les navigateurs arrivent à se planter sur des additions/soustractions aussi simples ...