Bagaimana cara menyembunyikan kolom di tabel HTML?

Question 1

Saya telah membuat tabel di ASPX. Saya ingin menyembunyikan salah satu kolom berdasarkan persyaratan tetapi tidak ada atribut seperti visiblepada pembuatan tabel HTML. Bagaimana saya bisa mengatasi masalah saya?

Question 2

Anda perlu menggunakan Style Sheet untuk tujuan ini.

<td style="display:none;">

Question 3

Anda dapat menggunakan nth-childpemilih CSS untuk menyembunyikan seluruh kolom:

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

Ini bekerja dengan asumsi bahwa sel kolom N (baik itu a thatau td) selalu merupakan elemen turunan ke-N dari barisnya.

Berikut demo nya.

Jika Anda ingin nomor kolom menjadi dinamis, Anda dapat melakukannya menggunakan querySelectorAllatau kerangka kerja apa pun yang menyajikan fungsionalitas serupa, seperti di jQuerysini:

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

Demo dengan jQuery

(Solusi jQuery juga berfungsi pada browser lama yang tidak mendukungnth-child ).

Question 4

Anda juga bisa menggunakan:

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

Perbedaan di antara mereka yang "tersembunyi" menyembunyikan sel tetapi menahan ruang tetapi dengan "menutup" ruang tidak diadakan seperti tampilan: tidak ada. Ini penting saat menyembunyikan seluruh kolom atau baris.

Question 5

Jawaban Kos hampir benar, tetapi dapat memiliki efek samping yang merusak. Ini lebih benar:

#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
    display: none;
}

CSS (Cascading Style Sheets) akan kaskade atribut untuk semua anak-anaknya. Ini berarti itu *:nth-child(1)akan menyembunyikan yang pertama tddari setiap tr DAN menyembunyikan elemen pertama dari semua tdanak. Jika salah satu dari Anda tdmemiliki hal-hal seperti tombol, ikon, input, atau pilihan, yang pertama akan disembunyikan (woops!).

Bahkan jika Anda tidak saat ini memiliki hal-hal yang akan disembunyikan, gambar frustrasi Anda di jalan jika Anda perlu untuk menambahkan satu. Jangan menghukum diri Anda di masa depan seperti itu, itu akan merepotkan untuk di-debug!

Jawaban saya hanya akan menyembunyikan pertama tddan thpada semua trdi #myTablemenjaga elemen lain yang aman.

Question 6

Orang-orang bootstrap menggunakan .hiddenkelas di <td>.

Question 7

Anda juga dapat menyembunyikan kolom menggunakan elemen col https://developer.mozilla.org/en/docs/Web/HTML/Element/col

Untuk menyembunyikan kolom kedua dalam tabel:

<table>
  <col />
  <col style="visibility:collapse"/>
  <tr><td>visible</td><td>hidden</td></tr>
  <tr><td>visible</td><td>hidden</td></tr>

Masalah umum: ini tidak akan berfungsi di Google Chrome. Silakan pilih bug di https://bugs.chromium.org/p/chromium/issues/detail?id=174167

Question 8

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

Luaskan cuplikan

gunakan .hideFullColumn dalam tabel dan .hidecol di th. Anda tidak perlu menambahkan kelas di td secara individual karena akan menjadi masalah karena indeks mungkin tidak memikirkan setiap td.

Question 9

Anda juga dapat melakukan apa yang disarankan vs dev secara terprogram dengan menetapkan gaya dengan Javascript dengan melakukan iterasi melalui kolom dan menyetel elemen td pada indeks tertentu untuk memiliki gaya tersebut.

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

Saya telah membuat tabel di ASPX. Saya ingin menyembunyikan salah satu kolom berdasarkan persyaratan tetapi tidak ada atribut seperti visiblepada pembuatan tabel HTML. Bagaimana saya bisa mengatasi masalah saya?

html asp.net html-table pengguna601367
sumber

Answer 2

175

Anda perlu menggunakan Style Sheet untuk tujuan ini.

<td style="display:none;">

Anuraj
sumber

1

bagaimana dengan hanya kolom pertama yang menggunakan css dari html

office 302

bagaimana cara menambahkan gaya ketika saya membuat tabel menggunakan javascript createelement (td);

kantor 302

1

@ office302 Terapkan gaya ini hanya untuk td pertama? Atau Anda hanya ingin menggunakan CSS - Ini Anda dapat melakukan sesuatu seperti initd:first-child { display:none; }

Anuraj

@Anuraj harus dicatat bahwa: anak pertama dll. Didukung> IE 11 dan Edge, tetap bagus

Vitaliy Terziev

Answer 3

1

bagaimana dengan hanya kolom pertama yang menggunakan css dari html

office 302

Answer 4

bagaimana cara menambahkan gaya ketika saya membuat tabel menggunakan javascript createelement (td);

kantor 302

Answer 5

1

@ office302 Terapkan gaya ini hanya untuk td pertama? Atau Anda hanya ingin menggunakan CSS - Ini Anda dapat melakukan sesuatu seperti initd:first-child { display:none; }

Anuraj

Answer 6

@Anuraj harus dicatat bahwa: anak pertama dll. Didukung> IE 11 dan Edge, tetap bagus

Vitaliy Terziev

Answer 7

88

Anda dapat menggunakan nth-childpemilih CSS untuk menyembunyikan seluruh kolom:

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

Ini bekerja dengan asumsi bahwa sel kolom N (baik itu a thatau td) selalu merupakan elemen turunan ke-N dari barisnya.

Berikut demo nya.

Jika Anda ingin nomor kolom menjadi dinamis, Anda dapat melakukannya menggunakan querySelectorAllatau kerangka kerja apa pun yang menyajikan fungsionalitas serupa, seperti di jQuerysini:

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

Demo dengan jQuery

(Solusi jQuery juga berfungsi pada browser lama yang tidak mendukungnth-child ).

Kos
sumber

1

Ini dapat memiliki efek samping yang merusak, lihat jawaban saya di bawah ini untuk solusi yang lebih baik.

Rick Smith

@Rick Poin yang bagus. Memperbarui postingan saya untuk menghindari masalah dengan cara lain (menggunakan pemilih anak).

Kos

pemilih anak pasti lebih baik. Jawaban yang bagus.

Rick Smith

Solusi bagus tetapi perlu sedikit lebih banyak pertimbangan pada kasing colspan.

Cinoss

Answer 8

1

Ini dapat memiliki efek samping yang merusak, lihat jawaban saya di bawah ini untuk solusi yang lebih baik.

Rick Smith

Answer 9

@Rick Poin yang bagus. Memperbarui postingan saya untuk menghindari masalah dengan cara lain (menggunakan pemilih anak).

Kos

Answer 10

pemilih anak pasti lebih baik. Jawaban yang bagus.

Rick Smith

Answer 11

Solusi bagus tetapi perlu sedikit lebih banyak pertimbangan pada kasing colspan.

Cinoss

Answer 12

30

Anda juga bisa menggunakan:

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

Perbedaan di antara mereka yang "tersembunyi" menyembunyikan sel tetapi menahan ruang tetapi dengan "menutup" ruang tidak diadakan seperti tampilan: tidak ada. Ini penting saat menyembunyikan seluruh kolom atau baris.

Dov Miller
sumber

1

Saya telah menemukan bahwa untuk tag div, penciutan juga akan menahan ruang. Untuk tag div Anda harus menggunakan display: none; agar benar-benar runtuh dan tidak menahan ruang.

Dov Miller

5

visibility: collapsedirancang khusus untuk menangani sel yang menunjukkan / menyembunyikan, karena ada perbedaan saat menghitung ulang lebar / tinggi sel antara ini dan display:none. Lihat developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values

SteveB

Answer 13

1

Saya telah menemukan bahwa untuk tag div, penciutan juga akan menahan ruang. Untuk tag div Anda harus menggunakan display: none; agar benar-benar runtuh dan tidak menahan ruang.

Dov Miller

Answer 14

5

visibility: collapsedirancang khusus untuk menangani sel yang menunjukkan / menyembunyikan, karena ada perbedaan saat menghitung ulang lebar / tinggi sel antara ini dan display:none. Lihat developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values

SteveB

Answer 15

Jawaban Kos hampir benar, tetapi dapat memiliki efek samping yang merusak. Ini lebih benar:

#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
    display: none;
}

CSS (Cascading Style Sheets) akan kaskade atribut untuk semua anak-anaknya. Ini berarti itu *:nth-child(1)akan menyembunyikan yang pertama tddari setiap tr DAN menyembunyikan elemen pertama dari semua tdanak. Jika salah satu dari Anda tdmemiliki hal-hal seperti tombol, ikon, input, atau pilihan, yang pertama akan disembunyikan (woops!).

Bahkan jika Anda tidak saat ini memiliki hal-hal yang akan disembunyikan, gambar frustrasi Anda di jalan jika Anda perlu untuk menambahkan satu. Jangan menghukum diri Anda di masa depan seperti itu, itu akan merepotkan untuk di-debug!

Jawaban saya hanya akan menyembunyikan pertama tddan thpada semua trdi #myTablemenjaga elemen lain yang aman.

Answer 16

10

Orang-orang bootstrap menggunakan .hiddenkelas di <td>.

theapache64
sumber

Answer 17

Anda juga dapat menyembunyikan kolom menggunakan elemen col https://developer.mozilla.org/en/docs/Web/HTML/Element/col

Untuk menyembunyikan kolom kedua dalam tabel:

<table>
  <col />
  <col style="visibility:collapse"/>
  <tr><td>visible</td><td>hidden</td></tr>
  <tr><td>visible</td><td>hidden</td></tr>

Masalah umum: ini tidak akan berfungsi di Google Chrome. Silakan pilih bug di https://bugs.chromium.org/p/chromium/issues/detail?id=174167

Answer 18

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

Luaskan cuplikan

gunakan .hideFullColumn dalam tabel dan .hidecol di th. Anda tidak perlu menambahkan kelas di td secara individual karena akan menjadi masalah karena indeks mungkin tidak memikirkan setiap td.

Answer 19

Anda juga dapat melakukan apa yang disarankan vs dev secara terprogram dengan menetapkan gaya dengan Javascript dengan melakukan iterasi melalui kolom dan menyetel elemen td pada indeks tertentu untuk memiliki gaya tersebut.

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
sumber

2

Semoga Ini akan menyelesaikan masalah tetapi tolong tambahkan penjelasan kode Anda dengannya sehingga pengguna akan mendapatkan pemahaman yang sempurna yang dia benar-benar inginkan.

Jaimil Patel

Answer 21

2

Semoga Ini akan menyelesaikan masalah tetapi tolong tambahkan penjelasan kode Anda dengannya sehingga pengguna akan mendapatkan pemahaman yang sempurna yang dia benar-benar inginkan.

Jaimil Patel

Bagaimana cara menyembunyikan kolom di tabel HTML?

Jawaban: