Jaka jest różnica między visibility:collapse
i display:none
?
Odpowiedzi:
Krótka wersja:
Pierwsza służy do całkowitego ukrycia elementów stołu. Ten ostatni służy do całkowitego ukrycia wszystkiego innego.
Wersja długa :
visibility: collapse
ukrywa element całkowicie (aby nie zajmował miejsca w układzie), ale tylko wtedy, gdy element jest elementem tabeli .
Jeśli zostanie użyty na elementach innych niż elementy tabeli, visibility: collapse
będzie działać jak visibility: hidden
. Dzięki temu element jest niewidoczny, ale nadal będzie zajmował miejsce w układzie.
display: none
całkowicie ukrywa element , więc nie zajmuje miejsca w układzie, ale nie powinien być używany na elementach tabeli.
display: none;
jest to, że łamie tabele przy użyciu colspan
i rowspan
.
visibility: collapse
zachowuje się dokładnie tak, jak visibility: hidden
w większości kontekstów formatowania: miejsce wymagane przez element jest „zarezerwowane” w układzie, ale sam element nie jest renderowany, pozostawiając puste miejsce w miejscu, w którym by się znajdował.
Są trzy wyjątki, o których wiem: wiersze tabeli, kolumny tabeli i elementy flex, w których visibility: collapse
zachowuje się podobnie display: none
, ale z jedną zasadniczą różnicą: „strut”. Możesz myśleć o strut jako o symbolu zastępczym o zerowej wielkości, który nie zajmuje własnego miejsca w procesie tworzenia układu, ale mimo to nadal jest częścią struktury formatowania i uczestniczy w obliczeniach rozmiaru.
Na przykład zwinięty wiersz tabeli nie będzie zajmować pionowej przestrzeni w tabeli, ale kolumny tabeli będą nadal wymiarowane „tak, jakby” zwinięty wiersz, a jego zawartość była rzeczywiście widoczna. Ma to na celu zapobieżenie „kołysaniu się” kolumn podczas włączania i wyłączania wierszy. Podobnie zwinięty element elastyczny nie zajmuje żadnej przestrzeni wzdłuż głównej osi, ale nadal przyczynia się do rozmiaru krzyża linii elastycznej.
„Nie używaj display: none
do tabel” to cenna praktyczna zasada, ale nie mówi wszystkiego.
display: none
jeśli nie chcesz, aby ukryte elementy uczestniczyły w jakikolwiek sposób w procesie tworzenia tabeli (lub linii elastycznej).visibility: collapse
jeśli chcesz dynamicznie wyświetlać i ukrywać elementy bez destabilizacji układu tabeli (lub linii elastycznej).Oto fragment kodu przedstawiający różnicę między wierszami tabeli display: none
i visibility: collapse
dla nich:
visibility:collapse
nie działa dla tabel w Safari. Okazało się, display:none
że działa dobrze w wierszach tabeli (w tym w Safari), chociaż powyższe komentarze dotyczące szerokości kolumn są poprawne
visibility:collapse
powinien być używany tylko na stołach. Na innych elementach będzie działać jako plik visibility:hidden
.
visibility:hidden
ukryj element, ale nadal zajmie miejsce elementu, ale display:none
nawet nie zachowa miejsca.
Zasoby :
Na ten sam temat:
display: none
nie należy używać w przypadku elementów tabeli, byłoby miłym dodatkiem.