Disparition des bordures de cellules de 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 bogue de 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 ceci 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 manque une ligne au-dessus du " 3 " dans la cellule en bas à droite - affichez-le dans n’importe quel autre navigateur et la ligne apparaîtra comme prévu. Fait intéressant, laissez tomber la section 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>

Faire cela le fait fonctionner. Est-ce que quelqu'un a vu ça? Je suppose que je vais juste me débarrasser de ma section thead pour le moment comme solution de contournement, bien que cela rende le tableau moins accessible.

Answer 1

Étrange ... certainement un bug de peinture. Si vous cliquez avec le bouton droit de la souris pour que le menu contextuel apparaisse sur la partie de l'emplacement de la ligne, puis, lorsque vous fermez le menu contextuel, la ligne a été redessinée en dessous.

Modifier: Solution de contournement - si vous mettez style="border-color: ...;" sur le <td rowspan="3">, vous pouvez obtenir la bordure, mais il doit s'agir d'une couleur différente . Utilisez une couleur aussi proche que le d'autres que possible. Par exemple, si la table est # ff0000, utilisez # ff0001

Answer 2

J'ai aussi trouvé ce bug 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 tout le pop back. vous pouvez résoudre ce problème de façon permanente en définissant border-collapse: separ; cela donne à chaque boreder de chaque cellule sa propre largeur. Ce n'est pas ce que je veux faire, mais ça marche.

Cela peut également être causé par l'utilisation de border-collapse: collapse; puis définissant aligner les frontières à 1px puis 0px. Comme il réduit les bordures, il semble donner la priorité à 0px par rapport à la largeur de 1px.

Dans tous les cas, il s’agit uniquement de Firefox et c’est une raison supplémentaire de s’en éloigner.