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

tablas html avanzado

Question

Soy relativamente nuevo en la programación web, así que probablemente estoy cometiendo un error obvio aquí.

Cuando intento ocultar una fila en una tabla de javascript como rows [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 la tabla se muestra por 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. Ocultar filas de la tabla sin cambiar el ancho total

Cualquier ayuda será bienvenida.

Answer 1

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 2

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

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

Idealmente, también debería encerrar secciones de encabezado y cuerpo con thead y tbody

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

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

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 funcionó para mí:

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