javascript - una - tabla invisible html

Ocultar filas de la 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 están configuradas para display: none; , la mesa se contrae para adaptarse al contenido de las filas visibles.

Answer 1

Como referencia, la solución de levik funciona perfectamente. En mi caso, al utilizar jQuery, la solución se veía más o menos así:

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

Answer 2

En CSS, table-layout: fixed; en su mesa, indica al navegador que respete los tamaños que ha especificado para 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 3

Si busca preservar el ancho total de la tabla, puede verificarla antes de ocultar una fila y establecer explícitamente la propiedad de estilo de ancho a este valor:

table.style.width = table.clientWidth + "px";
table.rows[3].style.display = "none";

Sin embargo, esto puede provocar que las columnas individuales se vuelvan a filtrar cuando oculta la fila. Una forma posible de mitigar esto es agregar un estilo a su tabla:

 table {
  table-layout: fixed;
 }

Answer 4

Puedes 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>