¿Cómo ocultar las filas de la tabla sin cambiar el tamaño del ancho total?

Question

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

Answer 1

Si desea conservar el ancho general de la tabla, puede verificarlo antes de ocultar una fila y establecer explícitamente la propiedad de estilo de ancho en este valor:

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

Sin embargo, esto puede hacer que las columnas individuales vuelvan a aparecer al ocultar la fila. Una posible forma de mitigar esto es agregando un estilo a su tabla:

 table {
  table-layout: fixed;
 }

Answer 2

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

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

Answer 3

Regla CSS visibilidad: colapso fue diseñado exactamente para eso.

tbody.collapsed > tr {
    visibility: collapse;
}

Después de agregar este CSS, puede activar la visibilidad desde JS con:

tbody.classList.toggle('collapsed');

Answer 4

En CSS, table-layout: fixed; en su tabla le indica al navegador que respete los tamaños que ha especificado para alturas y anchos. Esto generalmente 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 5

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>