Disparition des bordures de cellules de la table CSS dans les navigateurs basés sur Gecko

Question

J'ai une construction de table html très spécifique qui semble révéler un bug Gecko.

Voici une version distillée du problème. Observez le tableau suivant dans un navigateur basé sur Gecko (FF, par exemple): (vous devrez copier et coller dans un nouveau fichier)

<style> 
table.example{ 
    border-collapse:collapse; 
} 
table.example td { 
    border:1px solid red; 
} 
</style> 
<table class="example"> 
    <thead> 
     <tr> 
      <th>1</th> 
      <th>2</th> 
      <th>3</th>   
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td rowspan="3">3</td> 

     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td rowspan="2">2</td>  
     </tr> 
     <tr> 
      <td>1</td> 
      <td>3</td> 
     </tr> 
    </tbody> 
</table> 

Il y a une ligne manquante sur le « 3 » dans le cellule en bas à droite - affichez-la dans n'importe quel autre navigateur et la ligne apparaîtra comme prévu. Fait intéressant, fossé la section de thead de la table et regardez ce que nous obtenons:

<style> 
table.example{ 
    border-collapse:collapse; 
} 
table.example td { 
    border:1px solid red; 
} 
</style> 
<table class="example"> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td rowspan="3">3</td> 

     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td rowspan="2">2</td>  
     </tr> 
     <tr> 
      <td>1</td> 
      <td>3</td> 
     </tr> 
    </tbody> 
</table> 

Cela fait que cela fonctionne. Est-ce que quelqu'un a vu ça? Je suppose que je vais juste me débarrasser de ma section de thead pour l'instant comme une solution de contournement, mais cela rend la table plutôt moins accessible.

Answer 1

Étrange ... certainement un bug de peinture. Si vous faites un clic droit pour que le menu contextuel apparaisse sur partie où la ligne devrait être, alors quand vous fermez le menu contextuel, la ligne a été redessinée en dessous.

Edit: Solution - si vous mettez style="border-color: ...;" sur le <td rowspan="3"> vous pouvez obtenir la frontière à apparaître, mais il doit être une couleur différente - il suffit d'utiliser celui qui est aussi proche des autres que possible. Par exemple, si la table est # ff0000, utilisez # ff0001

Answer 2

J'ai aussi trouvé ce bogue mais ce n'est pas sur mon PC mais un autre. Si je redimensionne la fenêtre du navigateur après une certaine résolution, les lignes disparaîtront. Une fois que je maximise la fenêtre, tous les pop back. vous pouvez résoudre ce problème en définissant border-collapse: séparé; ceci donne à chaque boreder de chaque cellule sa propre largeur. Ce n'est pas ce que je veux faire mais ça marche.

Elle peut également être provoquée en utilisant l'effondrement de bordure: effondrement; puis définissez l'alignement des bordures sur 1px puis sur 0px. Parce qu'il écrase les frontières, il semble prioriser le 0px sur la largeur de 1px.

de toute façon c'est firefox seulement et c'est encore une autre raison de s'en éloigner.