colspan et IE7 - cellules se collent

Version imprimable

Bonjour,

Je veux dessiner un planning avec des demi_journées et cela se revele ardu d'avoir le bon rendu entre IE7 et FF.

Je me permet de commencer par le premier problème :

Pour résumer j'ai ca :
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 <html> <head> <style type="text/css"> td { border : 1px solid black; } </style> </head> <body> <table> <tr> <th colspan="10">Aug</th> </tr> <tr> <td colspan="2">04</td> <td colspan="2">05</td> <td colspan="2">06</td> <td colspan="2">07</td> <td colspan="2">08</td> </tr> <tr> <td colspan="2">I</td> <td colspan="2">I</td> <td colspan="2">I</td> <td>I</td> <td>I</td> <td>I</td> <td>I</td> </tr> </table> </body> </html>
une journée complète est composée de deux demi-journée donc deux <td> ou un <td colspan="2"> selon les cas.

Comme vous le verrez, sur IE7, certaines cellules se collent, alors que les autres sont correctement espacés.
Si je retire la premiere ligne de titre, les cellules s'espacent normalement.

Sur FF toutes les cellules s'espacent correctement avec ou sans ligne de titre.

Auriez-vous une idée ?

07/08/2008, 08h29
popo

D'où vient la classe cellule0 ?
07/08/2008, 10h09
sabotage

C'est un résidu de mon code véritable mais elle ne joue pas dans mon probleme.

J'ai edité mon message.

Bonjour,

A cause des bordures, deux cellules séparées semblent plus larges que deux cellules fusionnées.
J'avoue ne pas trop pouvoir expliquer pourquoi, sur certains navigateurs, la présence de l'entête de table entraîne la disparition de certains espaces entre les cellules.

Une alternative serait de mettre les données des cellules dans un élément <p> (par exemple).
En mettant la bordure sur cet élément, et en jouant avec les marges internes des <td> et des <p>, tu obtiendrais le résultat désiré sur tous les navigateurs.
Code:

1 2 3 4 5 6 7 8 td { padding:2px; text-align:center; } p { border:1px solid #000; padding:2px; }
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <table cellpadding="0" cellspacing="0"> <tr> <th colspan="10">Aug</th> </tr> <tr> <td colspan="2"><p>04</p></td> <td colspan="2"><p>05</p></td> <td colspan="2"><p>06</p></td> <td colspan="2"><p>07</p></td> <td colspan="2"><p>08</p></td> </tr> <tr> <td colspan="2"><p>I</p></td> <td colspan="2"><p>I</p></td> <td colspan="2"><p>I</p></td> <td><p>I</p></td> <td><p>I</p></td> <td><p>I</p></td> <td><p>I</p></td> </tr> </table>
Ce n'est peut-être pas une solution qui te convient, mais je la propose quand même en attendant de voir s'il existe une solution au problème d'origine.

18/08/2008, 11h04
sabotage

Bonjour,

Merci d'avoir etudié mon probleme et je m'excuse de reprendre ca tardivement.
J'arrive en effet a obtenir de bons resultats avec la solution proposée.
:king: