Jak ukryć kolumny w tabeli HTML?

Question 1

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?

Question 2

W tym celu musisz użyć arkusza stylów.

<td style="display:none;">

Question 3

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.

Oto demo.

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();

Demo z jQuery

(Rozwiązanie jQuery działa również w starszych przeglądarkach, które nie obsługująnth-child ).

Question 4

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.

Question 5

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.

Question 6

Ludzie z bootstrapu używają .hiddenklas <td>.

Question 7

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

Question 8

<style>
.hideFullColumn tr > .hidecol
{
    display:none;
}
</style>

Rozwiń fragment

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.

Question 9

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.

Question 10

<!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);

Answer 1

94

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?

html asp.net html-table user601367
źródło

Answer 2

175

W tym celu musisz użyć arkusza stylów.

<td style="display:none;">

Anuraj
źródło

1

co powiesz na pierwszy coloumn wykorzystujący css html

biuro 302

jak dodać do niego styl, gdy tworzę tabelę przy użyciu elementu createelement javascript (td);

biuro 302,

1

@ office302 Zastosować ten styl tylko do pierwszego td? Lub chcesz używać tylko CSS - to możesz zrobić coś takiegotd:first-child { display:none; }

Anuraj

@Anuraj należy zauważyć, że: pierwsze dziecko itp. Są obsługiwane> IE 11 i Edge, i tak dobre

Vitaliy Terziev

Answer 3

1

co powiesz na pierwszy coloumn wykorzystujący css html

biuro 302

Answer 4

jak dodać do niego styl, gdy tworzę tabelę przy użyciu elementu createelement javascript (td);

biuro 302,

Answer 5

1

@ office302 Zastosować ten styl tylko do pierwszego td? Lub chcesz używać tylko CSS - to możesz zrobić coś takiegotd:first-child { display:none; }

Anuraj

Answer 6

@Anuraj należy zauważyć, że: pierwsze dziecko itp. Są obsługiwane> IE 11 i Edge, i tak dobre

Vitaliy Terziev

Answer 7

88

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.

Oto demo.

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();

Demo z jQuery

(Rozwiązanie jQuery działa również w starszych przeglądarkach, które nie obsługująnth-child ).

Kos
źródło

1

Może to mieć szkodliwe skutki uboczne, zobacz moją odpowiedź poniżej, aby uzyskać lepsze rozwiązanie.

Rick Smith

@RickSmith Dobra uwaga. Zaktualizowałem mój post, aby uniknąć problemu w inny sposób (używając selektora dziecka).

Kos,

selektor dziecka jest zdecydowanie lepszy. Dobra odpowiedź.

Rick Smith

Niezłe rozwiązanie, ale potrzebuję trochę więcej rozważenia w sprawie colspan.

Cinoss

Answer 8

1

Może to mieć szkodliwe skutki uboczne, zobacz moją odpowiedź poniżej, aby uzyskać lepsze rozwiązanie.

Rick Smith

Answer 9

@RickSmith Dobra uwaga. Zaktualizowałem mój post, aby uniknąć problemu w inny sposób (używając selektora dziecka).

Kos,

Answer 10

selektor dziecka jest zdecydowanie lepszy. Dobra odpowiedź.

Rick Smith

Answer 11

Niezłe rozwiązanie, ale potrzebuję trochę więcej rozważenia w sprawie colspan.

Cinoss

Answer 12

30

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.

Dov Miller
źródło

1

Zauważyłem, że w przypadku tagów DIV zwijanie również zachowuje spację. W przypadku znaczników DIV musiałbyś użyć display: none; aby naprawdę zapaść się i nie utrzymać przestrzeni.

Dov Miller,

5

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

SteveB

Answer 13

1

Zauważyłem, że w przypadku tagów DIV zwijanie również zachowuje spację. W przypadku znaczników DIV musiałbyś użyć display: none; aby naprawdę zapaść się i nie utrzymać przestrzeni.

Dov Miller,

Answer 14

5

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

SteveB

Answer 15

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.

Answer 16

10

Ludzie z bootstrapu używają .hiddenklas <td>.

theapache64
źródło

Answer 17

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

Answer 18

<style>
.hideFullColumn tr > .hidecol
{
    display:none;
}
</style>

Rozwiń fragment

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.

Answer 19

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.

Answer 20

0

<!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);

Albert
źródło

2

Mam nadzieję, że to rozwiąże problem, ale proszę dodać wyjaśnienie swojego kodu, aby użytkownik uzyskał doskonałe zrozumienie, czego naprawdę chce.

Jaimil Patel

Answer 21

2

Mam nadzieję, że to rozwiąże problem, ale proszę dodać wyjaśnienie swojego kodu, aby użytkownik uzyskał doskonałe zrozumienie, czego naprawdę chce.

Jaimil Patel

Jak ukryć kolumny w tabeli HTML?

Odpowiedzi: