Discussion :

[alkariane]

Bonjour

Cela fait deux jours que je cherche une explication au problème suivant.

Voici le code simplifié de mon programme :

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
22
23
24
25
26
<table style="border-collapse: collapse">
	<thead>
		<tr>
			<td>hea</td>
			<td>der</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td style="border-bottom: 1px black solid">r</td>
			<td rowspan="2">ABCD</td></tr>
		<tr>
			<td>r</td>
		</tr>
		<tr>
			<td style="border-bottom: 1px black solid">r</td>
			<td rowspan="2">EFGH</td></tr>
		<tr>
			<td>r</td>
		</tr> 
		<tr>
			<td colspan="2">
			</td>
		</tr>
	</tbody>
</table>

Résultat : EFGH qui est un rowspan se retrouve avec un trait au milieu (continuation de la bordure de la case précédente qui n'est pas en rowspan) Par contre, ABCD n'a pas le souci.

Le but est d'afficher le résultat suivant à l'écran :

- ABCD
- EFGH

-----------------------------------------------------------------------------------------------------------------------
J'ai pu déterminer les points suivants :
- sans le border collapse, cela fonctionne (pas de "rayure" sur EFGH)
- si j'ote la ligne vide à la fin, cela fonctionne (s'agissant du haut de mon tableau final ce n'est pas une solution, j'ai forcément des lignes en dessous )
- si j'ote le <thead></thead>, cela fonctionne
- si j'applique un style au rowspan quel qui soit, cela fonctionne
- si je mets une bordure sur tous les éléments du tableau et que je mets une bordure inférieure ou égale à celle ci sur ma case précédent mon rowspan, cela fonctionne.
- si je mets un style à toutes les cellules <td></td> : border-style : hidden, ca fonctionne.

Ma question n'est donc pas de trouver une bidouille mais une explication.
J'ai consulté différents tutoriaux ainsi que les règles en cas de conflits mais cela ne m'a pas éclairé malheureusement.

En espérant une réponse pouvant éclairer ma lanterne

Alkariane

[htr999]

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
<table style="border-collapse: collapse">
	<thead>
		<tr>
			<td>hea</td>
			<td>der</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td style="border: 1px solid black;">r</td>
			<td rowspan="2">ABCD</td>
		</tr>
		<tr>
			<td>r</td>
		</tr>
		<tr>
			<td style="border-bottom: 1px solid black;">r</td>
			<td rowspan="2">EFGH</td>
		</tr>
		<tr>
			<td>r</td>
		</tr>
		<tr>
			<td colspan="2"></td>
		</tr>
	</tbody>
</table>

marche normal sous IE 7
sinon pb vient du dernier TR

Code :

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

1
2
3
<tr>
			<td colspan="2"></td>
		</tr>

[hed62]

Si c'est juste pour afficher un tiret devant des lettres...

Utilise l'attribut before et le tour est joué, sans aucune table...

Code :

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

1
2
 
texte::before{content: "-";}

[Er3van]

Sauf que ::before n'est pas reconnu par IE6 qui représente encore 25% de part de marché...

[alkariane]

Bonjour Tout le monde

Tout d'abord merci pour votre participation à ce débat

En fait j'ai oublié de préciser que l'application est globalement destinée à des navigateurs basés sur les moteurs Gecko comme Firefox pour une application interne. Cependant une compatibilité avec IE6 et 7 serait un bon bonus.

Pour répondre à htr999, sous Opera, le problème ne semble pas se poser tout comme sous IE7. Il s'agit donc d'un problème lié à Firefox et au moteur Gecko.

Sinon si je remplace la dernière ligne par :

Code html :

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

1
2
3
4
5
<td style="border-bottom: 1px black solid">r</td>
<td rowspan="2">IJKL</td></tr>
<tr>
<td>r</td>
</tr>

J'obtiens comme résultat que EFGH et IJKL sont "rayés".
Aussi quelque soit les lignes en dessous et leur nombre, seule la première ligne s'affiche correctement.


Pour répondre à hed62, il ne s'agit pas de faire "un tiret", celui-ci dans l'appli finale a une taille et une épaisseur fixes car correspond à la continuité d'une autre bordure.
Pour résumé, j'ai besoin de cette organisation.


En terme pratique, comme je l'ai dit, j'ai un certain nombre de possibilités pour contourner le problème mais j'aimerai le "comprendre" d'où mon post.

Aussi si quelqu'un sait pourquoi cela fait ce résultat sous Firefox, je lui en serai très reconnaissante

Merci d'avance !

Alkariane

ps : si quelqu'un peut me dire le résultat sous Internet Explorer 6 (je suis sous Ubuntu), cela m'intéresserait également