W CSS właściwości visibility i display mogą ukrywać elementy, ale robią to w różny sposób. To częsty temat w zadaniach egzaminacyjnych dotyczących tabel, układu strony i widoczności elementów.
visibility: hidden
Wartość hidden sprawia, że element jest niewidoczny, ale nadal zajmuje swoje miejsce w układzie strony.
Przykład:
<tr style="visibility: hidden">
<td>Komórka 3</td>
<td>Komórka 4</td>
</tr>
W tabeli taki wiersz nie będzie widoczny, ale pozostawi po sobie pustą przestrzeń. Dlatego kolejne wiersze nie przesuną się w jego miejsce.
display: none
Wartość none powoduje, że element zostaje całkowicie usunięty z układu strony. Nie jest widoczny i nie zajmuje miejsca.
Przykład:
<tr style="display: none">
<td>Komórka 3</td>
<td>Komórka 4</td>
</tr>
W tym przypadku następny wiersz tabeli przesunie się do góry, jakby ukrytego wiersza w ogóle nie było.
Różnica egzaminacyjna
Jeżeli na obrazku widać przerwę po ukrytym elemencie, należy użyć:
visibility: hidden;
Jeżeli element ma zniknąć bez pozostawiania miejsca, należy użyć:
display: none;
Inne wartości display
Dla elementów tabeli przeglądarka domyślnie stosuje specjalne wartości, np.:
- display: table dla tabeli,
- display: table-row dla wiersza,
- display: table-cell dla komórki.
Nie należy ustawiać display: table-cell dla znacznika <tr>, ponieważ wiersz tabeli nie jest komórką.