El ancho de la columna HTML cambia cuando la fila de la tabla está oculta

Question

Soy un recién llegado relativo a la programación web, así que probablemente estoy cometiendo un error obvio aquí.

Cuando intento ocultar una fila en una tabla de javascript como filas [i] .style.display = 'none', el diseño de la tabla se está rompiendo por completo. Originalmente, el contenido de la celda se estaba envolviendo, y el ancho de la mesa se estaba reduciendo. Luego agregué style = "table-layout: fixed" en la etiqueta de la tabla y style = "white-space: nowrap" en cada td. Esto detuvo el ajuste de línea, pero aún así el contenido no estaba alineado en una línea. Las celdas comenzaron a moverse hacia la izquierda si hay espacio y el ancho de la columna varía de una fila a otra. Luego agregué un ancho fijo para cada elemento th y td y también para el div que contiene la tabla. Aún así, el problema se mantuvo.

Mi HTML actual es algo como lo siguiente.

---

<div style="width: 300px"> 
    <table id="errorTable" width="100%" cellpadding="5" cellspacing="2" style="table-layout: fixed"> 
    <tr id="HeaderRow"> 
     <th style="width: 100px;">Header 1</th> 
     <th style="width: 50px;">Header 2</th> 
     <th style="width: 150px;">Header 3</th> 
    </tr> 
    <tr id="DetailRow1">           
     <td style="white-space:nowrap; width: 100px;">Data 1_1 in Row 1</td> 
     <td style="white-space:nowrap; width: 50px;">Data 1_2 in Row 1</td> 
     <td style="white-space:nowrap; width: 150px;">Data 1_3 in Row 1</td> 
    </tr> 
    <tr id="DetailRow2">           
     <td style="white-space:nowrap; width: 100px;">Data 2</td> 
     <td style="white-space:nowrap; width: 50px;">Data 2</td> 
     <td style="white-space:nowrap; width: 150px;">Data 2</td> 
    </tr> 
    <tr id="DetailRow3">           
     <td style="white-space:nowrap; width: 100px;">Data 3_1</td> 
     <td style="white-space:nowrap; width: 50px;">Data 3_2</td> 
     <td style="white-space:nowrap; width: 150px;">Data 3_3</td> 
    </tr> 
    </table> 
</div> 

---

Cuando se visualiza la tabla primera vez, las columnas están alineadas correctamente, con un ancho de 100, 50 y 150 px respectivamente. Pero si una fila, digamos que la segunda está oculta, el ancho de la celda de las dos filas mostradas restantes ya no se fija en 100, 50 y 150 y los datos ya no están alineados verticalmente. Tenga en cuenta que el ancho total de la tabla sigue siendo de 300 px. Los datos en cada celda se mueven a la izquierda si hay espacio disponible y el último espacio es usado por la última, en este caso, la tercera columna.

La siguiente publicación fue útil pero no resolvió completamente mi problema, como puede ver. Hiding table rows without resizing overall width

Cualquier ayuda será bienvenida.

Answer 1

Siempre corrija el ancho de sus columnas. ¿Ese sería tu problema?

.myTable td{ width:33% !important; } 

Idealmente, también debe incluir secciones de encabezado y el cuerpo usando thead y tbody

<table> 
    <thead> 
    <tr> ... </tr> 
    </thead> 

    <tbody> 
    . 
    .  
    . 
    </tbody> 
</table> 

Answer 2

estoy teniendo el mismo problema. Lancé un lapso dentro de cada mesa para ver si podía forzar el ancho y parece que funciona. Es feo sin embargo.

Answer 3

Tuve el mismo problema: traté de ocultar una columna por elem.style.display="none" pero al mostrar nuevamente el diseño se rompió. Este estilo de visualización trabajado para mí:

columns.item(i).style.display = "table-cell";