Cara menggunakan CSS untuk menyembunyikan jadual

Dalam pembangunan bahagian hadapan, jadual ialah komponen yang sangat biasa digunakan untuk memaparkan data. Walau bagaimanapun, kadangkala kami tidak mahu memaparkan semua data, tetapi perlu menyembunyikan lajur atau baris tertentu. Pada masa ini, kita perlu menggunakan CSS untuk menyembunyikan jadual.

1. Sembunyikan lajur jadual

1 Gunakan atribut paparan

Kita boleh menggunakan atribut paparan dalam CSS untuk menyembunyikan lajur jadual. Langkah-langkah khusus adalah seperti berikut:

Pertama, tetapkan nama kelas khas untuk lajur yang perlu disembunyikan. Sebagai contoh, kami menamakan lajur yang ingin kami sembunyikan "lajur tersembunyi".

Kemudian, dalam CSS, tetapkan

    .hidden-column { 
      display: none; 
    }

kepada lajur yang sepadan dengan nama kelas ini, dengan cara ini, lajur ini akan disembunyikan.

Sebagai contoh, berikut ialah jadual ringkas:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tom</td>
      <td>23</td>
      <td>tom@example.com</td>
      <td>(123) 456-7890</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>27</td>
      <td>jane@example.com</td>
      <td>(987) 654-3210</td>
    </tr>
    <tr>
      <td>John</td>
      <td>35</td>
      <td>john@example.com</td>
      <td>(111) 222-3333</td>
    </tr>
  </tbody>
</table>

Jika kita mahu menyembunyikan lajur "E-mel" jadual, kita boleh melakukan ini:

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

Pemilih CSS :nth-child() digunakan di sini untuk menentukan lajur yang perlu disembunyikan.

2. Gunakan atribut keterlihatan

Cara lain untuk menyembunyikan lajur ialah menggunakan atribut keterlihatan dalam CSS. Perbezaan antaranya dan atribut paparan ialah apabila kami menggunakan atribut keterlihatan untuk menyembunyikan lajur jadual, lajur tersembunyi masih menempati kedudukan asalnya pada halaman, tetapi tidak kelihatan Apabila menggunakan atribut paparan, lajur tersembunyi akan dialih keluar daripada halaman.

Kod di sini juga serupa dengan kaedah pertama. :

.hidden-column {
  visibility: hidden;
}

2. Sembunyikan baris jadual

Untuk menyembunyikan keseluruhan baris jadual, kita boleh menggunakan kaedah yang serupa dengan menyembunyikan lajur.

1. Gunakan atribut paparan

Sama seperti menyembunyikan lajur, kita juga boleh menggunakan atribut paparan dalam CSS untuk menyembunyikan baris jadual. Langkah-langkah khusus adalah seperti berikut:

Pertama, tetapkan nama kelas khas untuk baris yang perlu disembunyikan. Sebagai contoh, kami menamakan baris kedua yang perlu disembunyikan "baris tersembunyi".

Kemudian, dalam CSS, tetapkan baris yang sepadan dengan nama kelas ini:

.hidden-row {
  display: none;
}

2 Gunakan atribut keterlihatan

Serupa dengan menyembunyikan lajur, kita juga boleh menggunakan. sifat keterlihatan dalam CSS untuk menyembunyikan baris jadual. Begitu juga, baris jadual yang disembunyikan menggunakan kaedah ini masih menduduki kedudukan asalnya pada halaman, tetapi tidak lagi kelihatan.

Kod untuk menyembunyikan baris jadual menggunakan atribut keterlihatan adalah seperti berikut:

.hidden-row {
  visibility: hidden;
}

3. Ringkasan

Di atas ialah cara menggunakan CSS untuk menyembunyikan lajur jadual atau barisan. Tidak kira kaedah yang anda gunakan, anda boleh menyembunyikan sel jadual atau baris melalui elemen HTML atau pemilih CSS tertentu. Dalam proses pembangunan sebenar, pemahaman dan menggunakan teknik ini boleh mengawal gaya dan susun atur jadual dengan lebih baik dan meningkatkan kecekapan pembangunan bahagian hadapan.

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