nascondere un <tr>, pur coinvolgendo in calcoli larghezza

Question

Ci sono risultati di ricerca memorizzati in una tabella come quella qui sotto:

<table> 
    <tbody> 
     <tr> 
      <td>Column One</td> 
      <td>Column Two</td> 
      <td>Column Three</td> 
     </tr> 
    </tbody> 
</table> 

La tabella effettiva contiene molti più dati (sia in colonne e righe) ed è larghezza del fluido. Poiché i dati sono variabili, vorrei che lo table-layout rimanga auto, perché gestisce l'autoresizing (che sarebbe costoso e complicato da fare in javascript per dire 1.000 righe).

Questa tabella viene inoltre filtrata da un widget di ricerca in tempo reale che nasconde le righe che non corrispondono alla query aggiungendo display: none;. Tuttavia, ho trovato che questo spesso fa ricalcolare le larghezze della colonna (spesso causando alcuni salti stridenti nella larghezza della colonna). Questo ha senso, dato che le righe sono probabilmente incluse nei calcoli solo se hanno display: table-row;. Ma questo non è il comportamento che sto cercando.

E 'possibile nascondere un <tr> alla vista, ma ancora averlo incluso nella colonna larghezze calcoli fatti (il ridimensionamento, per esempio) dal browser su un tavolo con table-layout: auto;?

Ho provato a installare height: 0; (e max-height: 0;), ma ho imparato da other SO questions che questo non funziona a causa di display: table-cell;. Allo stesso modo, l'impostazione line-height: 0; non è andata a buon fine, ma ho pensato che sarebbe successo perché alcune delle mie colonne hanno contenuto di blocco.

Ho anche preso in considerazione l'impostazione esplicita delle larghezze su <td> s, ma in questo modo si mantiene fluido il tavolo (dovrei rimuovere le larghezze esplicite sul ridimensionamento, il che potrebbe causare salti di larghezza e non funzionerebbe a meno che non tutto delle righe erano visibili e incluse nel calcolo del ridimensionamento della tabella del browser).

Edit: per chiarire, per nascondere alla vista intendo nascondere come nel senso di display: none;, non visibility: hidden;. L'ultimo dei quali funzionerebbe se l'elemento non mantenesse l'altezza originale quando è nascosto, ma sfortunatamente non è così.

Nota: so che a prima vista questa sembra essere una domanda strettamente applicabile, ma credo che questo potrebbe essere un caso di uso comune. Come tale, ho messo in evidenza la parte più pertinente (leggi: il più importante) della domanda. Il resto (che è leggermente specifico per me) è più esplicativo di ogni altra cosa.

Answer 1

Se ho capito bene siete alla ricerca di visibility: collapse; dichiarazione:

17.5.5 Dynamic row and column effects

La proprietà visibility assume il valore collapse per la riga , riga gruppo, colonna e colonna mn elementi del gruppo. Questo valore fa sì che l'intera riga o colonna venga rimossa dal display e che lo spazio normalmente occupato da riga o colonna sia reso disponibile per altri contenuti. Il contenuto delle righe e delle colonne intersecate che intersecano la colonna o la riga compresso vengono tagliate.La soppressione della riga o colonna, tuttavia, non influisce altrimenti sul layout della tabella. Questo consente agli effetti dinamici di rimuovere righe o colonne di tabella senza forzare un nuovo layout della tabella per tenere conto della potenziale modifica nei vincoli di colonna.

Tuttavia sembra che questo sia bacato su alcuni dei browser web. Il MDN states:

Il supporto per visibility:collapse è mancante o parzialmente errati in alcuni browser moderni. In molti casi potrebbe non essere trattato correttamente come visibility:hidden su elementi diversi da righe e colonne della tabella.

Purtroppo essa agisce come visibility: hidden su Chrome37: Demo Here.

Ma per fortuna, è possibile falsificare l'effetto line-height: 0 dichiarazione:

Updated Demo

.hidden { 
    visibility: collapse; 
    line-height: 0; /* Set the height of the line box to 0 
        in order to remove the occupied space */ 
} 

Answer 2

usare i CSS:

tr { 
    visibility: hidden; 
}