template - link html




Diferencia entre "visibilidad: colapso" y "pantalla: ninguna" (3)

¿Cuál es la diferencia entre visibility:collapse y display:none ?


visibility: collapse comporta exactamente como la visibility: hidden en 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 debería haber estado.

Hay tres excepciones que conozco: filas de tabla, columnas de tabla y elementos flexibles, en los que visibility: collapse comporta 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 disposición, pero que, no obstante, 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 todavía se dimensionarán 'como si' la fila contraída y su contenido fuera realmente visible. Esto es para evitar que las columnas se "tambaleen", ya que las filas se activan y desactivan. Del mismo modo, un artículo flexible plegado no ocupa ningún espacio a lo largo del eje principal, pero aún contribuye a la línea de flexión de tamaño cruzado.

'No use display: none with tables' es una regla práctica valiosa, pero no cuenta toda la historia.

  • Use display: none si no desea que sus elementos ocultos participen de alguna manera en el proceso de diseño de la tabla (o línea flexible).
  • Usar visibility: collapse si desea mostrar y ocultar dinámicamente elementos 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: none y visibility: collapse para una fila de la tabla:

.show-right-border {
  border-right: 1px black solid;
}
<h3>visibility: collapse</h3>
<table class="show-right-border">
  <tr>
    <td>Short text.</td>
    <td style="visibility: collapse;">Loooooooooong text.</td>
  </tr>
</table>

<h3>display: none</h3>
<table class="show-right-border">
  <tr>
    <td>Short text.</td>
    <td style="display: none;">Loooooooooong text.</td>
  </tr>
</table>


visibility:collapse solo debe usarse en las tablas. En otros elementos, actuará como una visibility:hidden .

visibility:hidden ocultar el elemento pero aún tomar el espacio del elemento mientras se display:none ni siquiera mantendrá el espacio.

Recursos:

Sobre el mismo tema:


Version corta:

El primero se usa para ocultar por completo los elementos de la tabla. Este último se usa para ocultar completamente todo lo demás.

Versión larga

visibility: collapse oculta un elemento por completo (de modo que no ocupa ningún espacio en el diseño), pero solo cuando el elemento es un elemento de tabla .

Si se usa en elementos distintos a los elementos de la tabla, visibility: collapse actuará como visibility: hidden . Esto hace que un elemento sea invisible, pero ocupará espacio en el diseño.

display: none oculta un elemento por completo , por lo que no ocupa ningún espacio en el diseño, pero no debe usarse en los elementos de la tabla.

Referencia W3C





css