para - Desaparición de los bordes de las celdas de las tablas CSS en los navegadores basados ​​en Gecko

tabla sin bordes css

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á 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 que falta sobre el "3" en la celda inferior derecha: verla en cualquier otro navegador y la línea aparecerá como se esperaba. Curiosamente, abandona 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 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 sobre la parte donde debería estar la línea, cuando descarta el menú contextual, la línea se ha vuelto a dibujar debajo.

Editar: Solución: si coloca style="border-color: ...;" en <td rowspan="3"> puede hacer que aparezca el borde, pero tiene que ser de un color diferente , solo use uno que esté lo más cerca posible de los otros. Por ejemplo, si la tabla es # ff0000 usa # 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. puedes arreglar 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 ser causado por el uso de border-collapse: colapso; 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 él.