colspan et IE7 - cellules se collent

**sabotage** · 06/08/2008, 14h18

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**popo** · 07/08/2008, 08h29

D'où vient la classe cellule0 ?

**sabotage** · 07/08/2008, 10h09

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

J'ai edité mon message.

**c_s_s** · 07/08/2008, 11h06

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**sabotage** · 18/08/2008, 11h04

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.

colspan et IE7 - cellules se collent

HTML

Vue hybride

Discussions similaires

Partager

Partager