Desaparición de bordes de celda de tabla CSS en navegadores basados ​​en Gecko

Question

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

Aquí hay una versión destilada del problema. Observe la siguiente tabla en un navegador basado en Gecko (FF, por ejemplo): (tendrás 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> 

Hay una línea faltante sobre el "3" en el celda inferior derecha: véala en cualquier otro navegador y la línea aparecerá como se esperaba. Curiosamente, abandone la sección thead de la tabla y observe 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 lo hace funcionar. ¿Alguien ha visto esto? Supongo que me desharé de mi sección thead por ahora como una solución, aunque hace que la tabla sea bastante menos accesible.

Answer 1

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

Editar: Solución - si se pone en el style="border-color: ...;"<td rowspan="3"> se puede obtener de la frontera a aparecer, pero tiene que ser de un color diferente - sólo tiene que utilizar uno que sea lo más cercano a los demás 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 otra. Si cambio el tamaño de la ventana del navegador después de una resolución determinada, las líneas desaparecerán. una vez que maximizo la ventana, todo vuelve a aparecer. puede corregir esto permanentemente estableciendo border-collapse: separate; esto le da a cada taladro de cada celda su propio ancho. No es lo que quiero hacer, pero funciona.

También puede deberse al uso de border-collapse: collapse; luego estableciendo alineando bordes a 1px y luego a 0px. Debido a que colapsa los bordes, parece priorizar el 0px sobre el ancho de 1px.

de cualquier manera solo es Firefox y es una razón más para alejarse de ella.