Utworzyłem tabelę w ASPX. Chcę ukryć jedną z kolumn w oparciu o wymaganie, ale nie ma atrybutu takiego jak visiblew budowaniu tabeli HTML. Jak mogę rozwiązać mój problem?
Utworzyłem tabelę w ASPX. Chcę ukryć jedną z kolumn w oparciu o wymaganie, ale nie ma atrybutu takiego jak visiblew budowaniu tabeli HTML. Jak mogę rozwiązać mój problem?
Odpowiedzi:
W tym celu musisz użyć arkusza stylów.
<td style="display:none;">
td:first-child { display:none; }
Możesz użyć nth-childselektora CSS, aby ukryć całą kolumnę:
#myTable tr > *:nth-child(2) {
display: none;
}
Działa to przy założeniu, że komórka w kolumnie N (czy to a thlub td) jest zawsze N-tym elementem potomnym swojego wiersza.
Jeśli chcesz, aby numer kolumny był dynamiczny, możesz to zrobić za pomocą querySelectorAlldowolnego frameworka prezentującego podobną funkcjonalność, jak jQuerytutaj:
$('#myTable tr > *:nth-child(2)').hide();
(Rozwiązanie jQuery działa również w starszych przeglądarkach, które nie obsługująnth-child ).
możesz także użyć:
<td style="visibility:hidden;">
or
<td style="visibility:collapse;">
Różnica między nimi polegająca na tym, że „ukryta” ukrywa komórkę, ale utrzymuje przestrzeń, ale przy „zwijaniu” przestrzeń nie jest utrzymywana jak wyświetlacz: brak. Jest to istotne podczas ukrywania całej kolumny lub wiersza.
visibility: collapsejest zaprojektowany specjalnie do obsługi wyświetlania / ukrywania komórek, ponieważ istnieje różnica podczas ponownego obliczania szerokości / wysokości komórki między tym a display:none. Zobacz developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values
Odpowiedź Kos jest prawie poprawna, ale może mieć szkodliwe skutki uboczne. To jest bardziej poprawne:
#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
display: none;
}
CSS (Cascading Style Sheets) będzie kaskadować atrybuty do wszystkich swoich elementów podrzędnych. Oznacza to, że *:nth-child(1)ukryje pierwszy tdz każdego tr ORAZ pierwszy element wszystkich tddzieci. Jeśli któryś z twoich tdma takie rzeczy, jak przyciski, ikony, wejścia lub zaznaczenia, pierwszy z nich zostanie ukryty (ojej!).
Nawet jeśli nie masz obecnie rzeczy, które będą ukryte, wyobraź sobie swoją frustrację w przyszłości, jeśli musisz coś dodać. Nie karz w ten sposób swojego przyszłego ja, to będzie trudne do debugowania!
Moja odpowiedź będzie tylko ukryć pierwszy tdi thna wszystko trw #myTableutrzymując inne elementy bezpieczne.
Ludzie z bootstrapu używają .hiddenklas <td>.
Możesz także ukryć kolumnę za pomocą elementu col https://developer.mozilla.org/en/docs/Web/HTML/Element/col
Aby ukryć drugą kolumnę w tabeli:
<table>
<col />
<col style="visibility:collapse"/>
<tr><td>visible</td><td>hidden</td></tr>
<tr><td>visible</td><td>hidden</td></tr>
Znane problemy: to nie zadziała w Google Chrome. Zagłosuj na błąd na https://bugs.chromium.org/p/chromium/issues/detail?id=174167
<style>
.hideFullColumn tr > .hidecol
{
display:none;
}
</style>użyj .hideFullColumn w tabeli i .hidecol w th. Nie musisz osobno dodawać klasy w td, ponieważ będzie to problem, ponieważ indeks może nie uwzględniać każdego td.
Możesz również zrobić to, co programowo sugeruje vs dev, przypisując styl za pomocą JavaScript, przechodząc przez kolumny i ustawiając element td w określonym indeksie, aby miał ten styl.
<!doctype html>
<html lang="en">
<head>
<style id="myStyleSheet">
...
</style>
var column = 3;
var styleSheet = document.getElementById("myStyleSheet").sheet;
var rule = "table tr td:nth-child("+ column +"),table th:nth-child("+ column +")
{display: none}";
styleSheet.insertRule(rule);