Bagaimana untuk menyembunyikan lajur jadual menggunakan CSS

Dengan pembangunan reka bentuk web, jadual, sebagai salah satu kaedah susun atur halaman yang terawal, sudah biasa kepada kita pada tahap tertentu dan digunakan secara meluas dalam reka bentuk web. Sebagai bahasa penanda HTML dengan fungsi penetapan taip yang kaya, jadual kerap digunakan dalam reka bentuk web dan sering digunakan untuk memaparkan maklumat dan carta data yang kompleks. Walau bagaimanapun, dalam beberapa kes, kami mungkin tidak mahu memaparkan semua maklumat dalam jadual, tetapi hanya sebahagian daripadanya. Dalam kes ini, CSS menyediakan cara yang sangat mudah dan berkesan untuk menyembunyikan lajur tertentu dalam jadual. Hari ini kita akan belajar cara menyembunyikan lajur jadual menggunakan CSS.

1. Atribut paparan dalam helaian gaya CSS

Kami tahu bahawa terdapat atribut dalam CSS yang dipanggil paparan, yang boleh menetapkan keadaan paparan sesuatu elemen atribut paparan boleh dihantar Tetapkan kepada "tiada" untuk menyembunyikannya. Jadi, untuk menyembunyikan lajur jadual, kita boleh menggunakan atribut paparan untuk menyembunyikan lajur jadual.

2. Kaedah pelaksanaan lajur sembunyi

Seterusnya, kami menggunakan jadual html mudah untuk menunjukkan. Pada masa yang sama, kita hanya perlu menambah gaya dalam CSS untuk merealisasikan fungsi menyembunyikan lajur.

Pertama, kami mentakrifkan jadual html ringkas dan menetapkan gaya untuknya.

nbsp;html>


    <meta>
    <title>Bagaimana untuk menyembunyikan lajur jadual menggunakan CSS</title>
    <style>
        table{
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td{
            border: 1px solid black;
            padding: 5px;
        }
    </style>


    

Dalam tetapan gaya, kami menetapkan gaya jadual asas, termasuk sempadan luar meja, celah sel, dsb. Oleh itu, jadual kami kelihatan seperti ini:

Katakan kita ingin menyembunyikan lajur kedua jadual, "Jantina", maka kita hanya perlu menggunakan atribut paparan.

table td:nth-child(2),
table th:nth-child(2){
    display: none;
}

Menggunakan pernyataan CSS di atas, anda boleh mencapai kesan menyembunyikan "jantina" dalam lajur kedua jadual. Maksudnya, melalui pemilih CSS: atribut nth-child(n), kita boleh mendapatkan elemen td atau ke yang sepadan dengan bilangan lajur tertentu dalam jadual, dan melalui nilai paparan:tiada gaya, elemen lajur ini boleh disembunyikan.

Di sini, kami menerangkan maksud pernyataan CSS:

table td:nth-child(2),  // 选中表格第二列td
table th:nth-child(2){  // 选中表格第二列th
    display: none;   // 隐藏所选择的td、th
}

Kami dapat melihat bahawa menggunakan atribut paparan adalah sangat mudah Anda hanya perlu menambah baris kod di atas kepada kod asal Gaya CSS. Laksanakan fungsi menyembunyikan lajur jadual. Sekarang, mari kita lihat kesan khusus.

Seperti yang anda lihat dari gambar, lajur kedua "Jantina" telah berjaya disembunyikan.

3. Perbezaan antara menyembunyikan lajur dan lajur terpotong

Dalam CSS, kami juga mempunyai atribut yang dipanggil terpotong, yang juga boleh digunakan untuk menyembunyikan lajur dalam jadual. Perbezaan daripada hide ialah hide hanya menyembunyikan elemen, manakala terpotong memanjangkan elemen kepada 0 lebar piksel untuk mencapai kesan tersembunyi sepenuhnya dan tidak mengambil ruang.

Kod terpenggal adalah seperti berikut:

table td:nth-child(2),
table th:nth-child(2){
    width: 0;
    padding: 0;
    border: none;
    white-space: nowrap;
}

Dalam terpenggal, kami bukan sahaja menetapkan lebar elemen kepada 0, tetapi juga menetapkan padding dan jidar kepada 0. Juga, gunakan white-space:nowrap untuk mengalihkan kandungan sedikit ke kiri dan mengelakkannya daripada dibalut. Dengan cara ini, kami telah berjaya menyembunyikan baris kedua jadual, "Jantina".

4. Senario aplikasi kaedah sorok dan terpotong

Seterusnya, mari kita ringkaskan secara ringkas senario aplikasi kaedah sorok dan terpotong.

Bagi kaedah sorok, ia lebih sesuai untuk adegan yang memerlukan pertukaran antara paparan dan penyembunyian, seperti submenu dalam bar menu. Selain itu, hide juga sesuai untuk menyembunyikan data abnormal tertentu dalam jadual untuk memastikan keindahan dan kebolehgunaan halaman.

Kaedah terpotong lebih sesuai untuk senario di mana beberapa data dalam jadual perlu disembunyikan, manakala susun atur dan hierarki jadual perlu dikekalkan Sebagai contoh, dalam senarai komen blog, kita boleh menyembunyikan maklumat Sensitif pengguna disembunyikan, dan maklumat identitinya masih dipanjangkan hingga 0, yang tidak menempati ruang susun atur.

Ringkasnya, perbezaan antara kaedah sorok dan kaedah terpotong bergantung pada keperluan reka bentuk dan sifat jadual yang perlu menyembunyikan data. Apabila kita menggunakannya, kita harus membuat pilihan berdasarkan keadaan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan lajur jadual menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!