Qual'è la differenza tra visibility:collapsee display:none?
Risposte:
Versione breve:
Il primo viene utilizzato per nascondere completamente gli elementi del tavolo. Quest'ultimo è usato per nascondere completamente tutto il resto.
Versione lunga :
visibility: collapsenasconde completamente un elemento (in modo che non occupi spazio nel layout), ma solo quando l'elemento è un elemento di tabella .
Se utilizzato su elementi diversi dagli elementi della tabella, visibility: collapseagirà come visibility: hidden. Questo rende un elemento invisibile, ma occuperà comunque spazio nel layout.
display: nonenasconde un elemento del tutto , in modo che non occupa alcuno spazio nel layout, ma non deve essere utilizzato su elementi di tabella.
display: none;è perché rompe le tabelle usando colspane rowspan.
visibility: collapsesi comporta esattamente come visibility: hiddennella maggior parte dei contesti di formattazione: lo spazio richiesto dall'elemento è 'riservato' nel layout, ma l'elemento stesso non viene renderizzato, lasciando uno spazio vuoto dove sarebbe stato.
Ci sono tre eccezioni che conosco: righe di tabella, colonne di tabella e elementi flessibili, in cui visibility: collapsesi comporta come display: none, ma con una grande differenza: il "montante". Puoi pensare al montante come a un segnaposto di dimensione zero, che non rivendica alcuno spazio proprio nel processo di layout, ma è comunque parte della struttura di formattazione e partecipa ad alcuni calcoli di dimensione.
Una riga di tabella compressa, ad esempio, non occuperà alcuno spazio verticale nella tabella, ma le colonne della tabella saranno comunque dimensionate "come se" la riga compressa e il suo contenuto fossero effettivamente visibili. Questo serve per evitare che le colonne "oscillino" quando le righe vengono attivate e disattivate. Allo stesso modo, un elemento flessibile compresso non occupa spazio lungo l'asse principale, ma contribuisce comunque alla dimensione trasversale della linea flessibile.
"Non utilizzare display: nonecon le tabelle" è una valida regola pratica, ma non racconta l'intera storia.
display: nonese non si desidera che i propri elementi nascosti partecipino in alcun modo al processo di layout della tabella (o della linea flessibile).visibility: collapsese si desidera mostrare e nascondere dinamicamente gli elementi senza destabilizzare il layout della tabella (o della linea flessibile).Di seguito è riportato uno snippet di codice che mostra la differenza tra display: nonee visibility: collapseper una riga di tabella:
visibility:collapsenon funziona per le tabelle in Safari. Ho trovato display:noneche funziona bene sulle righe della tabella (incluso in Safari) anche se i commenti sopra sulla larghezza delle colonne sono corretti
visibility:collapsedovrebbe essere usato solo sui tavoli. Su altri elementi agirà come un file visibility:hidden.
visibility:hiddennascondi l'elemento ma prendi comunque lo spazio dell'elemento mentre display:nonenon manterrà nemmeno lo spazio.
Risorse:
Sullo stesso argomento:
display: nonenon dovrebbe essere usata sugli elementi della tabella sarebbe una bella aggiunta.