Jak mogę ukryć znacznik <td>
przy użyciu JavaScript lub wbudowanego CSS?Jak ukryć znacznik TD za pomocą wbudowanego kodu JavaScript lub CSS?
Odpowiedz
czego można się spodziewać się stało w to miejsce? Tabela nie może ponownie przepłynąć, aby wypełnić wolne miejsce - to wydaje się być receptą na błędne odpowiedzi przeglądarki.
Pomyśl o ukryciu zawartości td, a nie samego td.
Sam sposób chcesz niczego ukrywać: visibility: hidden;
co display: none; czy to będzie działało? (przeglądarka itp.). – Blankman
wyświetlacz: żaden nie jest w moim odczuciu, czego tak naprawdę potrzebujesz w 95% czasu. – annakata
Widoczność ukrywa element bez zmiany przepływu dokumentu, dlatego też unikaj problemów, o które martwi się edeverett. – Simon
.hide{
visibility: hidden
}
<td class="hide"/>
Edit- Tylko,
Różnica między wyświetlaczem i widoczność jest to.
"display": ma wiele właściwości lub wartości, ale te, na których się koncentrujesz, to "none" i "block". "none" jest jak wartość hide, a "block" jest jak show. Jeśli użyjesz wartości "none", całkowicie ukryjesz, co kiedykolwiek tag HTML zastosowałeś ten styl CSS. Jeśli użyjesz "bloku", zobaczysz znacznik html i jego treść. bardzo prosta.
"Widoczność": ma wiele wartości, ale chcemy dowiedzieć się więcej o wartościach "ukrytych" i "widocznych". "hidden" będzie działać w taki sam sposób, jak wartość "block" dla wyświetlacza, ale to ukryje tag i jego zawartość, ale nie ukryje fizycznej przestrzeni tego tagu. Na przykład, jeśli masz kilka linii tekstu, to i obraz (obrazek), a następnie tabelę z trzema kolumnami i dwoma wierszami z ikonami i tekstem. Teraz, jeśli zastosujesz css widoczności z ukrytą wartością do obrazu, obraz zniknie, ale przestrzeń, z której korzystał obraz, pozostanie w miejscu, innymi słowy, skończysz z dużą przestrzenią (dziurą) między tekstem a tekstem. stół. Teraz, jeśli użyjesz wartości "widocznej", Twój tag docelowy i jego elementy będą widoczne ponownie.
Jeśli masz więcej niż to w javascript, rozważ niektóre biblioteki javascript, np. jquery, który zabiera nieco prędkości, ale zapewnia bardziej czytelny kod. Kod
swoje pytanie za pośrednictwem jquery:
$("td").hide();
Oczywiście istnieją inne biblioteki javascript tam, jak this comparison on wikipedia pokazy.
Można po prostu ukryć zawartość <td>
tag tylko o tym atrybut stylu: style = "display:none"
dla E.g
<td style = "display:none" >
<p> I'm invisible </p>
</td>
mogą się ukryć zawartość Wewnątrz według następującej inline CSS
<div style="visibility:hidden"></div>
np
<td><div style="visibility:hidden">Your Content Goes Here:</div></td>
<td style = "display:none" >
<p> Content display none </p>
</td>
lub
<td style="visibility:hidden"> Your content is hidden </td>
Zwróć uwagę, że: 2 sposoby są różne. Powinieneś spróbować, aby sprawdzić wynik.
Wszystko jest możliwe (lub prawie) z CSS, wystarczy użyć:
display: none; //to hide
display: table-cell //to show
Istnieje jednak niepożądana przestrzeń między ukrytymi komórkami, nawet gdy szerokość jest ustawiona na 0. – Sednus