¿Cuál es la diferencia entre visibility:collapsey display:none?
Respuestas:
Version corta:
El primero se utiliza para ocultar completamente los elementos de la tabla. Este último se usa para ocultar completamente todo lo demás.
Versión larga :
visibility: collapseoculta un elemento por completo (para que no ocupe ningún espacio en el diseño), pero solo cuando el elemento es un elemento de tabla .
Si se usa en elementos que no sean elementos de tabla, visibility: collapseactuará como visibility: hidden. Esto hace que un elemento sea invisible, pero seguirá ocupando espacio en el diseño.
display: noneoculta un elemento por completo , por lo que no ocupa ningún espacio en el diseño, pero no debe usarse en elementos de tabla.
display: none;es porque rompe tablas usando colspany rowspan.
visibility: collapsese comporta exactamente como visibility: hiddenen la mayoría de los contextos de formato: el espacio requerido por el elemento está 'reservado' en el diseño, pero el elemento en sí no se representa, dejando un espacio en blanco donde habría estado.
Hay tres excepciones que conozco: filas de tabla, columnas de tabla y elementos flexibles, en los que se visibility: collapsecomporta como display: none, pero con una diferencia importante: el 'puntal'. Puede pensar en el puntal como un marcador de posición de tamaño cero, que no reclama ningún espacio propio en el proceso de diseño, pero sigue siendo parte de la estructura de formato y participa en algunos cálculos de tamaño.
Una fila de tabla contraída, por ejemplo, no ocupará ningún espacio vertical en la tabla, pero las columnas de la tabla seguirán dimensionadas "como si" la fila contraída y su contenido fueran realmente visibles. Esto es para evitar que las columnas se "tambaleen" cuando las filas se alternan hacia adentro y hacia afuera. Del mismo modo, un elemento flexible colapsado no ocupa ningún espacio a lo largo del eje principal, pero aún contribuye al tamaño transversal de la línea flexible.
'No usar display: nonecon tablas' es una regla valiosa, pero no cuenta toda la historia.
display: nonesi no desea que sus elementos ocultos participen de ninguna manera en el proceso de diseño de la tabla (o línea flexible).visibility: collapsesi desea mostrar y ocultar elementos dinámicamente sin desestabilizar el diseño de la tabla (o línea flexible).Aquí hay un fragmento de código que demuestra la diferencia entre display: noney visibility: collapsepara una fila de tabla:
visibility:collapseno funciona para tablas en Safari. Descubrí display:noneque funciona bien en las filas de la tabla (incluso en Safari), aunque los comentarios anteriores sobre el ancho de la columna son correctos
visibility:collapsesolo debe usarse en tablas. En otros elementos actuará como un visibility:hidden.
visibility:hiddenocultar el elemento pero seguir ocupando el espacio del elemento mientras display:noneque ni siquiera mantendrá el espacio.
Recursos:
Sobre el mismo tema:
display: noneno debería usarse en los elementos de la tabla sería una buena adición.