css lajur tersembunyi

Kata Pengantar

Untuk pembangun bahagian hadapan, adalah sangat penting untuk menguasai kemahiran reka letak CSS dan kaedah menyembunyikan elemen. Artikel ini akan menumpukan pada cara menggunakan CSS untuk menyembunyikan lajur dalam jadual, membantu anda mengendalikan isu paparan data jadual dengan lebih fleksibel.

1. Kaedah konvensional menyembunyikan lajur jadual dalam CSS

Jadual ialah salah satu elemen yang biasa digunakan dalam halaman hadapan dan boleh digunakan untuk memaparkan struktur data dan maklumat yang kompleks. Walau bagaimanapun, dalam proses pembangunan sebenar, kita sering menghadapi situasi di mana kita perlu menyembunyikan lajur jadual. Sebagai contoh, apabila jumlah data adalah besar, beberapa lajur mungkin perlu disembunyikan pada masa tertentu untuk memastikan halaman itu jelas dan ringkas. Berikut ialah cara CSS biasa untuk menyembunyikan lajur jadual:

1. Menggunakan display:none

Cara yang paling biasa ialah menggunakan ciri CSS display:none. Ia akan menyembunyikan keseluruhan lajur jadual, yang sangat berkesan untuk data yang tidak perlu dipaparkan.

td:nth-child(n) {
    display:none;
}

di mana n ialah bilangan lajur yang anda ingin sembunyikan. Jika anda perlu menyembunyikan lajur ketiga, tukar n kepada 3.

Walau bagaimanapun, sila ambil perhatian apabila menggunakan display:none:

• Apabila anda perlu memproses berbilang jadual atau lajur jadual, display:none tidak akan melepaskan ruang yang diduduki oleh lajur tersembunyi. Ini boleh mengakibatkan reka letak visual yang hodoh.
• Jika anda perlu menunjukkan atau menyembunyikan lajur jadual berdasarkan input pengguna atau beberapa syarat lain, display:none tidak akan berguna lagi.

2. Menggunakan visibility:hidden

Kaedah biasa lain ialah menggunakan visibility:hidden , yang menjadikan lajur jadual tersembunyi tetapi masih menggunakan ruang. Bergantung pada keperluan anda, anda juga boleh menggunakan visibility:collapse, yang akan menyebabkan semua elemen yang terdapat dalam lajur tidak dipaparkan.

td:nth-child(n) {
    visibility:hidden;
}

3. Gunakan lebar:0

Jika anda ingin menyembunyikan ruang yang diduduki oleh lajur jadual tetapi masih mengekalkan reka letak jadual, tetapkan atribut lebar kepada 0:

td:nth-child(n) {
    width:0;
}

Kaedah ini mengekalkan reka letak jadual dan membebaskan ruang yang diduduki oleh lajur tersembunyi. Pada masa yang sama, ia tidak menjejaskan elemen lain dalam jadual.

Walau bagaimanapun, anda masih perlu memikirkan cara mengendalikan situasi tertentu di mana anda perlu menyembunyikan atau menunjukkan lajur.

2. Gunakan JavaScript untuk menyembunyikan lajur jadual secara dinamik

Dalam pembangunan sebenar, kadangkala kita perlu memaparkan atau menyembunyikan lajur jadual secara dinamik berdasarkan beberapa syarat. Dalam kes ini, anda boleh menggunakan JavaScript untuk mengawal lajur jadual secara pemrograman.

1. Proses baris jadual satu demi satu

Dalam kes ini, anda perlu menggelung setiap baris dalam jadual dan memproses setiap sel secara individu. Untuk menulis kod yang boleh mengendalikan operasi dinamik, kami mengesyorkan menambah kelas tambahan pada jadual. Kemudian kita boleh menggunakan kelas ini dalam JavaScript untuk memilih sel untuk disembunyikan:

Kod HTML:

<table class="my-table">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

Kod JavaScript:

function hide_column(column) {
    var cols = document.querySelectorAll('.my-table td:nth-child(' + (column) + ')');
    for (var i = 0; i < cols.length; i++) {
        cols[i].style.display = 'none';
    }
}

Fungsi ini menerima satu lajur parameter , menentukan kedudukan lajur yang hendak disembunyikan. Gunakan paparan gaya: tiada; untuk menyembunyikan sel.

2. Tetapkan objek kelas

Kaedah lain yang mungkin adalah untuk menetapkan kelas yang sepadan untuk setiap lajur jadual. Kita boleh menggunakan JavaScript untuk menambah atau memadam kelas. Kaedah ini boleh mengawal reka letak ruang dengan lebih baik apabila jadual disembunyikan dan dipaparkan:

Kod HTML:

<table>
    <tr>
        <td class="col1">1</td>
        <td class="col2">2</td>
        <td class="col3">3</td>
    </tr>
    <tr>
        <td class="col1">4</td>
        <td class="col2">5</td>
        <td class="col3">6</td>
    </tr>
    <tr>
        <td class="col1">7</td>
        <td class="col2">8</td>
        <td class="col3">9</td>
    </tr>
</table>

Kod JavaScript:

function hide_column(column) {
    var cols = document.getElementsByClassName('col' + column);
    for (var i = 0; i < cols.length; i++) {
        cols[i].style.display = 'none';
    }
}

Fungsi ini menerima lajur parameter, yang bermakna Bilangan lajur untuk disembunyikan. Gunakan paparan:none; untuk menyembunyikan sel.

3. Langkah berjaga-jaga untuk menyembunyikan lajur jadual dengan CSS

Apabila menggunakan CSS untuk menyembunyikan lajur jadual, sila beri perhatian kepada perkara berikut:

1. Pengepala jadual memerlukan khas rawatan

Jika anda perlu menyembunyikan lajur jadual dan memerlukan penapisan bahagian belakang applet Kereta Api Berkelajuan Tinggi Beijing, pengepala dalam jadual juga harus disembunyikan atau dialihkan. Dalam kebanyakan kes, pengepala jadual adalah lebih daripada label teks ringkas atau elemen jadual, tetapi struktur yang lebih kompleks. Oleh itu, anda memerlukan kemahiran untuk menggunakan CSS atau JavaScript untuk menyembunyikan, menukar atau mengendalikan elemen pengepala.

2. Menyembunyikan lajur boleh mengakibatkan kehilangan kefungsian

Jika anda bercadang untuk memasukkan elemen interaktif (seperti butang atau kotak input) dalam lajur jadual, menyembunyikan lajur akan menyebabkan ini Elemen tidak boleh diakses. Oleh itu, anda perlu berhati-hati untuk melindungi kefungsian dan kebolehcapaian elemen ini apabila menyembunyikan dan menunjukkan lajur jadual.

3. Gunakan JavaScript untuk kawalan yang lebih besar

Walaupun CSS boleh menyembunyikan dan menunjukkan lajur jadual, gunakan JavaScript untuk pendekatan yang lebih fleksibel. JavaScript boleh membantu anda menukar mod paparan jadual secara dinamik berdasarkan situasi.

Kesimpulan

Dalam pembangunan sebenar, CSS menyembunyikan lajur jadual biasanya diperlukan. Kami telah membincangkan teknik biasa untuk menyembunyikan dan menunjukkan lajur jadual, meliputi pelbagai cara untuk mengawal jadual dengan CSS. Sama ada anda cuba menyembunyikan lajur yang tidak diingini dalam laporan yang memaparkan sejumlah besar data atau mereka bentuk cara untuk menyembunyikan carta untuk tapak web anda, teknik ini boleh membantu anda menyelesaikan masalah tersebut. Dengan memahami dan menguasai kaedah ini, anda akan dapat mengawal data dan susun atur jadual dengan lebih fleksibel, dan menyelesaikan tugas pembangunan bahagian hadapan dengan cekap.

Atas ialah kandungan terperinci css lajur tersembunyi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!