Come nascondere le righe della tabella senza ridimensionare la larghezza complessiva?

Question

Esiste un modo per nascondere le righe della tabella senza influire sulla larghezza complessiva della tabella? Ho un po 'di javascript che mostra / nasconde alcune righe della tabella, ma quando le righe sono impostate su display: none; , la tabella con restringimento si adatta al contenuto delle righe visibili.

Answer 1

Se stai cercando di preservare la larghezza complessiva della tabella, puoi controllarla prima di nascondere una riga e impostare esplicitamente la proprietà style della larghezza su questo valore:

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

Tuttavia, ciò può causare il riflusso delle singole colonne quando si nasconde la riga. Un modo possibile per mitigare questo è aggiungendo uno stile alla tua tabella:

 table {
  table-layout: fixed;
 }

Answer 2

Per riferimento, la soluzione di levik funziona perfettamente. Nel mio caso, usando jQuery, la soluzione era simile a questa:

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

Answer 3

Regola CSS visibilità: comprimi è stato progettato esattamente per quello.

tbody.collapsed > tr {
    visibility: collapse;
}

Dopo aver aggiunto questo CSS è possibile attivare la visibilità da JS con:

tbody.classList.toggle('collapsed');

Answer 4

Nei CSS, layout tabella: fisso; sulla tabella indica al browser di rispettare le dimensioni specificate per altezze e larghezze. Questo generalmente sopprime il ridimensionamento automatico da parte del browser a meno che tu non abbia dato alcun suggerimento sulle dimensioni preferite delle tue righe e colonne.

Answer 5

Puoi farlo usando puro HTML

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