Visibilidad: colapso se representa como la visibilidad: oculto

Question

Reducir

Sólo para table elementos. collapse elimina una fila o columna, pero no afecta el diseño table. El espacio ocupado por la fila o columna estará disponible para otro contenido. Si el colapso se utiliza en otros elementos, se representa como hidden.

http://www.w3schools.com/cssref/pr_class_visibility.asp

Sin embargo, el elemento se sigue ocupando espacio como visibility: hidden. Lo probé en Safari y Chrome. ¿Alguien tiene una solución donde se mantiene el diseño table pero se elimina el espacio?

Answer 1

No funcionará según lo previsto en todos los navegadores, solo Firefox e IE (no puedo confirmar IE en este momento). El MDN docs on visibility dicen:

el apoyo a visibility:collapse falta o parcialmente incorrecta en algunos navegadores modernos. En muchos casos, es posible que no se trate correctamente como visibility:hidden en elementos distintos de las filas y columnas de la tabla.

Puede probarlo con este jsFiddle: http://jsfiddle.net/meT7k/. En Chrome, la primera fila se representa como visibility: hidden. En Firefox, collapse se aplica correctamente.

En Chrome, en su lugar, obtiene los resultados deseados al aplicar display: none a la fila. Sin embargo, eso probablemente forzará una reorganización de toda la tabla (por ejemplo, el ancho de las columnas puede cambiar después de que se cambie la propiedad display).

Answer 2

Envuelva los contenidos en un <span></span> y configure la pantalla en ninguno.