Widoczność: upadek jest renderowany jako visibility: hidden

Question

Zwiń

tylko dla table elementy. collapse usuwa wiersz lub kolumnę, ale nie ma wpływu na układ table. Przestrzeń zajmowana przez wiersz lub kolumnę będzie dostępna dla innych treści. Jeśli zwijanie jest używane do innych elementów, renderuje się jako hidden.

http://www.w3schools.com/cssref/pr_class_visibility.asp

jednak element jest nadal zajmowania miejsca jak visibility: hidden. Testowałem w Safari i Chrome. Ktoś ma rozwiązanie, w którym zachowany jest układ table, ale przestrzeń jest usuwana?

Answer 1

Nie będzie działać zgodnie z założeniami we wszystkich przeglądarkach, tylko Firefox i IE (nie mogę teraz potwierdzić IE). MDN docs on visibility powiedzieć:

brakuje Wsparcie dla visibility:collapse lub częściowo błędna w niektórych nowoczesnych przeglądarek. W wielu przypadkach może nie być poprawnie traktowany jak visibility:hidden na elementach innych niż wiersze i kolumny tabeli.

Możesz przetestować go za pomocą tego jsFiddle: http://jsfiddle.net/meT7k/. W Chrome pierwszy wiersz jest renderowany jako visibility: hidden. W przeglądarce Firefox collapse jest poprawnie stosowany.

W Chrome uzyskuje się pożądane wyniki, gdy zamiast tego stosuje się wiersz display: none. Jednak to prawdopodobnie wymusi zmianę układu całej tabeli (np. Szerokości kolumn mogą ulec zmianie po zmianie właściwości display).

Answer 2

Zawiń zawartość w <span></span> i ustaw wyświetlacz na brak.