¿Cuáles son algunas soluciones alternativas buenas para lidiar con el error “Visibilidad: Colapso” en Mozilla Firefox?
¿Cuáles son algunas soluciones para resolver el error de “visibility: collapse” en Mozilla Firefox?
Contexto:
Mis amigos en los comentarios me informaron que hay un error antiguo de Firefox que hace que la propiedad CSS “visibility: collapse” actúe como la propiedad CSS “visibility: hidden”. Esto provoca que la tabla tenga el tamaño completo con todas las columnas visibles desplazadas hacia la izquierda y con espacio adicional a la derecha.
Con tablas más grandes, este comportamiento no deseado es aún más drástico.
Sólo quiero poder cambiar la visibilidad de las columnas de la tabla y que se vea igual en Chrome, Edge y Firefox, lo que me lleva a mi pregunta: ¿cuáles son algunas soluciones efectivas para resolver el error de “Visiblility: Collapse” en Mozilla Firefox?
Código:
Aquí está el enlace:
https://jsfiddle.net/jado66/pgyLm86e/18/
Aquí está el código en el enlace:
html
<html lang="en">
<head>
<meta charset="utf-8">
<style>
th{
border-bottom: 1px solid grey;
}
td{
text-align: center;
}
col{
border: 1px solid grey;
width: 55px;
}
</style>
</head>
<body>
<div style="text-align: center;">
<table style="margin: auto; border: 1px solid black; border-spacing: 0; border-collapse: collapse;">
<colgroup>
<col id = "col<em>1">
<col id = "col</em>2">
<col id = "col<em>3">
<col id = "col</em>4" style="visibility: collapse">
<col id = "col<em>5" style="visibility: collapse">
<col id = "col</em>6">
</colgroup>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
<td>1.6</td>
</tr>
</table>
</div>
</div>
</body>
</html>
davy.ai
Una solución alternativa para tratar el error “Visibilidad: Colapsar” en Mozilla Firefox es utilizar la propiedad “max-width: 0” en lugar de “visibilidad: colapsar”. Esto ocultará la columna mientras permite que la tabla mantenga su ancho y diseño. Otra solución alternativa es utilizar Javascript para agregar una clase a la columna de la tabla que establezca su ancho en 0, ocultándola efectivamente sin disrumpir el diseño de la tabla. Además, utilizando la propiedad “display: none” en lugar de “visibilidad: colapsar” también puede producir el resultado deseado. Se recomienda utilizar trucos CSS con moderación y realizar pruebas exhaustivas en varios navegadores para garantizar un comportamiento consistente.