Jak ukryć kolumny w tabeli HTML?

Możesz użyć selektora nth-child CSS, aby ukryć całą kolumnę:

#myTable tr > *:nth-child(2) {
    display: none;
}

Działa to przy założeniu, że komórka kolumny N (czy to th Czy td) jest zawsze N-tym elementem potomnym jej wiersza.

Oto demo.

​ Jeśli chcesz, aby numer kolumny był dynamiczny, możesz to zrobić używając querySelectorAll lub dowolnego frameworka prezentującego podobną funkcjonalność, jak jQuery tutaj:

$('#myTable tr > *:nth-child(2)').hide();

Demo z jQuery

(rozwiązanie jQuery działa również na starsze przeglądarki, które nie obsługują nth-child).

Możesz również użyć:

<td style="visibility:hidden;">
or
<td style="visibility:collapse;">

Różnica między nimi, że "ukryty" ukrywa komórkę, ale utrzymuje przestrzeń, ale przy "zwinięciu" przestrzeń nie jest utrzymywana jak wyświetlacz: Brak. Ma to znaczenie przy ukrywaniu całej kolumny lub wiersza.

Odpowiedź Kos jest prawie słuszna, 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 (kaskadowe arkusze stylów) będzie kaskada / align = "left" / Oznacza to, że *:nth-child(1) ukryje pierwszą td KAŻDEGO tr i ukryć pierwszy element wszystkich td dzieci. Jeśli któryś z twoich td ma takie rzeczy jak przyciski, ikony, wejścia lub selekcje, pierwszy z nich będzie ukryty (woops!).

Nawet jeśli nie obecnie mają rzeczy, które będą ukryte, wyobraź sobie swoją frustrację w dół drogi, jeśli trzeba dodać. Nie karz Tak swojej przyszłej jaźni, to będzie ból do debugowania!

Moja odpowiedź ukryje tylko pierwsze td i th na wszystkich tr w #myTable zachowując bezpieczeństwo pozostałych elementów.

Bootstrap ludzie używają .hidden klasy na <td>.

Możesz również 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 będzie działać w Google Chrome. Proszę zagłosować na błąd w 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 dodawać klasy w td indywidualnie, ponieważ będzie to problem, ponieważ indeks może nie być w umyśle każdego td.

Możesz również zrobić to, co sugeruje vs dev programowo, przypisując styl za pomocą Javascript przez iterację przez kolumny i ustawiając element td na określonym indeksie, aby miał ten styl.