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
Partager