Różnica między „visibility: collapse” a „display: none”

Jaka jest różnica między visibility:collapsei display:none?

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: collapseukrywa 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: collapsebędzie działać jak visibility: hidden. Dzięki temu element jest niewidoczny, ale nadal będzie zajmował miejsce w układzie.

display: nonecałkowicie ukrywa element , więc nie zajmuje miejsca w układzie, ale nie powinien być używany na elementach tabeli.

Referencje W3C

visibility: collapsezachowuje się dokładnie tak, jak visibility: hiddenw 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: collapsezachowuje 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: nonedo tabel” to cenna praktyczna zasada, ale nie mówi wszystkiego.

• Użyj, display: nonejeśli nie chcesz, aby ukryte elementy uczestniczyły w jakikolwiek sposób w procesie tworzenia tabeli (lub linii elastycznej).
• Użyj, visibility: collapsejeś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: nonei visibility: collapsedla nich:

.show-right-border {
  border-right: 1px black solid;
}

<h3>visibility: collapse</h3>
<table class="show-right-border">
  <tr>
    <td>Short text.</td>
    <td style="visibility: collapse;">Loooooooooong text.</td>
  </tr>
</table>

<h3>display: none</h3>
<table class="show-right-border">
  <tr>
    <td>Short text.</td>
    <td style="display: none;">Loooooooooong text.</td>
  </tr>
</table>

visibility:collapsepowinien być używany tylko na stołach. Na innych elementach będzie działać jako plik visibility:hidden.

visibility:hiddenukryj element, ale nadal zajmie miejsce elementu, ale display:nonenawet nie zachowa miejsca.

Zasoby :

• w3schools.com - widoczność
• w3schools.com - display

Na ten sam temat:

• Jaka jest różnica między visibility: hidden i display: none
• Właściwości CSS: wyświetlanie a widoczność
• Wyświetlanie CSS: brak i widoczność: ukryta
• Czy krycie: 0 ma dokładnie taki sam efekt jak widoczność: ukryta

visibility:collapsema display:nonezachowanie tylko dla elementów tabeli. W przypadku innych elementów powinien renderować się jako hidden.

Możesz również zastosować visibility: collapsena elemencie pod kontenerem flexbox (element flex). Będzie działać tak, jak nakładasz go na element z display: table-rowlubdisplay: table-column