La larghezza della colonna HTML cambia quando la riga della tabella è nascosta

Question

Sono un nuovo arrivato relativamente alla programmazione Web, quindi probabilmente sto facendo un errore evidente qui.

Quando sto cercando di nascondere una riga in una tabella da file javascript come [i] .style.display = 'none', il layout della tabella si sta completamente interrompendo. Originariamente, il contenuto della cella veniva incartato e la larghezza del tavolo si restringeva. Ho quindi aggiunto style = "table-layout: fixed" nel tag table e style = "white-space: nowrap" in ogni td. Ciò ha fermato il ritorno a capo, ma il contenuto non era allineato su una riga. Le celle hanno iniziato a spostarsi a sinistra se c'è spazio e la larghezza della colonna varia da una riga all'altra. Ho quindi aggiunto una larghezza fissa a ciascuno degli elementi th e td e anche al div che contiene la tabella. Ancora il problema è rimasto.

Il mio codice HTML corrente è simile al seguente.

---

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

---

Quando la tabella viene visualizzata prima volta, le colonne sono allineate correttamente, con larghezza 100, 50 e 150 px rispettivamente. Ma se una riga, ad esempio la seconda è nascosta, la larghezza della cella delle restanti due righe visualizzate non viene più fissata a 100, 50 e 150 e i dati non sono più allineati verticalmente. Si noti che la larghezza complessiva della tabella rimane 300 px. I dati di ogni cella si spostano a sinistra se c'è spazio disponibile e lo spazio aggiuntivo viene utilizzato dall'ultima, in questo caso, terza colonna.

Il seguente post è stato utile ma non ha risolto completamente il mio problema, come potete vedere. Hiding table rows without resizing overall width

Qualsiasi aiuto sarà il benvenuto.

Answer 1

Fissare sempre la larghezza delle colonne. Questo sarebbe il tuo problema?

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

Idealmente, si dovrebbe anche racchiudere intestazione e il corpo sezioni grazie thead e tbody

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

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

Answer 2

Sto avendo lo stesso problema. Ho buttato uno span all'interno di ogni tavolo per vedere se potevo forzare la larghezza e sembra funzionare. È brutto però.

Answer 3

Ho avuto lo stesso problema: ho cercato di nascondere una colonna per elem.style.display="none" ma quando si è mostrato di nuovo il layout era rotto. Questo stile di visualizzazione funzionato per me:

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