visibility

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨julio de 2015⁩.

Resumen

La propiedadvisibility se usa para dos efectos:

El valorhidden esconde un elemento, pero deja (vacío) el espacio donde debería aparecer.
El valorcollapse esconde filas o columnas de una tabla.

Valor incial:visible
Se aplica a: Todos los elementos.
Valor heredado: Sí
Porcentajes: N/A
Medio:visual
Valor calculado: Como se especifica.

Sintaxis

visibility: visible | hidden | collapse |inherit

Valores

visible: El elemento se muestra normalmente.
hidden: El elemento está escondido, pero los demás elementos se colocan como si ése elemento estuviera presente. Esto funciona como si el elemento fuera absolutamente transparente. Los elementos, con la propiedadvisibility: visible, descendientes de ése elemento serán visibles.
collapse: Para tablas, filas, columnas y grupos de tablas. Las filas o columnas se esconden y el espacio que normalmente ocupan, es ocupado (como si aplicáramos el códigodisplay: none a las filas/columnas de la tabla). Sin embargo, el tamaño de las columnas o filas restantes, es calculado como si las filas/columnas fusionadas estuvieran presentes. Esta propiedad se diseñó así, al fin de permitir la supresión rápida de filas/columnas de una tabla sin necesidad de calcular de nuevo los altos y los anchos de cada porción de tabla. (Para otros elementos,collapse funciona comohidden).

Ejemplos

p        { visibility: hidden; }   /* Los párrafos no serán visibles                       */p.showme { visibility: visible; }  /* excepto los que tengan class = showme (clase= muéstrame)                */tr.col   { visibility: collapse; } /* las filas de la tabla con la clasecol se fusionarán*/

El soporte paravisibility: collapse no se encuentra o está implementado parcialmente en algunos navegadores modernos. En muchos casos será tratado comovisibility: hidden en elementos que no son filas / columnas de una tabla.

visibility:collapse puede cambiar el aspecto de una tabla si hay anidadas tablas dentro de celdas fusionadas, a no ser que se especifique explícitamentevisibility: visible en la tabla anidada.