Desaparecer los bordes de celda de la tabla CSS en navegadores basados ​​en Gecko

Question

Tengo una construcción de tabla html muy específica que parece revelar un error Gecko.

Aquí hay una versión destilada del problema. Observe la siguiente tabla en un navegador basado en gecko (FF, por ejemplo): (tendrá que copiar y pegar esto en un nuevo archivo)

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

Falta una línea sobre " 3 " en la celda inferior derecha: visualícela en cualquier otro navegador y la línea aparecerá como se esperaba. Curiosamente, deshazte de la sección thead de la tabla y mira lo que obtenemos:

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

Hacer eso hace que funcione. ¿Alguien ha visto esto? Supongo que por ahora me libraré de mi sección principal como una solución alternativa, aunque hace que la tabla sea menos accesible.

Answer 1

Extraño ... definitivamente un error de pintura. Si hace clic con el botón derecho para que el menú contextual aparezca sobre parte de donde debería estar la línea, cuando cierre el menú contextual, la línea se ha vuelto a dibujar debajo.

Editar: Solución alternativa: si coloca style="border-color: ...;" en el <td rowspan="3"> puede hacer que aparezca el borde, pero tiene que ser un color diferente , solo use uno que esté lo más cerca posible del otros como sea posible Por ejemplo, si la tabla es # ff0000, use # ff0001

Answer 2

También encontré este error pero no está en mi PC sino en otro. Si cambio el tamaño de la ventana del navegador después de una determinada resolución, las líneas desaparecerán. Una vez que maximizo la ventana, todo vuelve a aparecer. puede arreglar esto permanentemente estableciendo border-collapse: separe; Esto le da a cada perforador de cada celda su propio ancho. No es lo que quiero hacer, pero funciona.

También puede ser causado al usar border-collapse: collapse; luego configurando los bordes de alineación a 1px y luego 0px. Debido a que colapsa los bordes, parece priorizar el 0px sobre el ancho de 1px.

de cualquier manera es solo Firefox y es otra razón más para alejarse de él.