Ocultar un , mientras sigue involucrándolo en los cálculos de ancho

Hay resultados de búsqueda almacenados en una tabla como la siguiente:

Column One Column Two Column Three

La tabla real contiene muchos más datos (tanto en columnas como en filas) y es de ancho fluido. Como los datos son variables, me gustaría que el table-layout la table-layout permanezca auto , ya que maneja el ajuste automático (lo cual sería costoso y complicado de hacer en javascript, por ejemplo, 1.000 filas).

Esta tabla también se filtra mediante un widget de búsqueda en vivo que oculta las filas que no coinciden con la consulta agregando display: none; . Sin embargo, he encontrado que esto a menudo hace que los anchos de columna sean recalculados (a menudo causando algunos saltos discordantes en el ancho de la columna). Esto tiene sentido, dado que es probable que las filas solo incluyan cálculos si tienen display: table-row; . Pero este no es el comportamiento que busco.

¿Es posible ocultar un

de la vista, pero aún tenerlo incluido en los cálculos de anchos de columna realizados (en el tamaño, por ejemplo) por el navegador en una tabla con table-layout: auto;
?

Intenté configurar la height: 0; (y max-height: 0; ), pero hemos aprendido de otras preguntas SO que esto no funciona debido a display: table-cell; . Del mismo modo, Setting line-height: 0; falló, pero pensé que lo haría, ya que algunas de mis columnas tienen contenido bloqueado.

También consideré explícitamente establecer anchos en los

s, pero esto hace que la tabla sea fluida (tendría que eliminar los anchos explícitos en el cambio de tamaño, lo que podría causar saltos de ancho, y no funcionaría a menos que todos los las filas fueron visibles e incluidas en el cálculo del tamaño de la tabla del navegador).

Editar: para aclarar, ocultar de la vista me refiero a ocultar como en el sentido de display: none; , no visibility: hidden; . El último de los cuales funcionaría si el elemento no conservara su altura original cuando está oculto, pero desafortunadamente este no es el caso.

Nota: Sé que a primera vista esta parece ser una pregunta muy estrechamente aplicable, pero creo que este podría ser un caso de uso común. Como tal, he puesto en negrita la parte más aplicable (léase: la más importante) de la pregunta. El rest (que es ligeramente específico para mí) es más explicativo que cualquier otra cosa.

Si entendí correctamente, estás buscando visibility: collapse; statement:

17.5.5 Efectos dynamics de fila y columna

La propiedad de visibility toma el collapse del valor para los elementos de filas, grupos de filas, columnas y grupos de columnas. Este valor hace que toda la fila o columna se elimine de la pantalla y que el espacio normalmente ocupado por la fila o columna esté disponible para otro contenido. El contenido de las filas y columnas distribuidas que se cruzan con la columna o fila contraída se recortan. Sin embargo, la supresión de la fila o columna no afecta el diseño de la tabla. Esto permite que los efectos dynamics eliminen las filas o columnas de la tabla sin forzar una reorganización de la tabla para tener en cuenta el posible cambio en las restricciones de la columna.

Sin embargo, parece que esto tiene errores en algunos navegadores web. El MDN declara :

El soporte para la visibility:collapse falta o es parcialmente incorrecto en algunos navegadores modernos. En muchos casos, puede no tratarse correctamente como visibility:hidden en elementos distintos de las filas y columnas de la tabla.

Desafortunadamente, actúa como visibility: hidden en Chrome37: demostración aquí .

Pero, afortunadamente, puedes simular el efecto por line-height: 0 statement line-height: 0 :

Demo actualizada

 .hidden { visibility: collapse; line-height: 0; /* Set the height of the line box to 0 in order to remove the occupied space */ } 

usar CSS:

 tr { visibility: hidden; }