Ocultar filas de tabla sin cambiar el ancho total

Question

¿Hay alguna manera de ocultar las filas de la tabla sin afectar el ancho total de la tabla? Tengo un javascript que muestra/oculta algunas filas de la tabla, pero cuando las filas se establecen en display: none;, la tabla se contrae para ajustarse al contenido de las filas visibles.

Answer 1

Si usted está buscando para preservar el ancho total de la tabla, se puede comprobar antes de ocultar una fila, y establecer explícitamente la propiedad de estilo ancho a este valor:

Sin embargo, esto puede causar las columnas individuales para refluir cuando oculta la fila. Una posible forma de mitigar esto es mediante la adición de un estilo a su mesa:

table { 
    table-layout: fixed; 
} 

Answer 2

Como referencia, la solución de Levik funciona perfectamente. En mi caso, usando jQuery, la solución parecía algo como esto:

$('#tableId').width($('#tableId').width()); 

Answer 3

En CSS, en su tabla indica al navegador que cumplir con los tamaños que ha especificado para las alturas y anchuras. En general, esto suprime el cambio de tamaño automático del navegador a menos que no haya dado ninguna pista sobre los tamaños preferidos de sus filas y columnas.

Answer 4

usted puede hacerlo usando HTML puro

<table border="1"> 
<colgroup> 
    <col width="150px" /> 
    <col width="10px" /> 
    <col width="220px" /> 
</colgroup> 
<tr> 
    <td valign="top">1</td> 
    <td> </td> 
    <td>2</td> 
</tr> 
<tr> 
    <td>3</td> 
    <td> </td> 
    <td>4</td> 
</tr> 
</table>