Cara menggunakan CSS untuk menyembunyikan jadual

Dalam pembangunan bahagian hadapan, jadual ialah salah satu elemen yang biasa digunakan, tetapi kadangkala kita perlu menyembunyikan beberapa baris atau lajur untuk menyembunyikan kandungan yang tidak diperlukan atau mengoptimumkan pengalaman pengguna. Jadi, bagaimana menggunakan CSS untuk menyembunyikan jadual?

CSS ialah bahasa helaian gaya yang boleh digunakan untuk mengawal reka letak, fon, warna, dll. dokumen HTML. CSS mempunyai kelebihan yang besar apabila ia berkaitan dengan penyembunyian meja. Di bawah ini kami akan memperkenalkan beberapa kaedah yang biasa digunakan untuk menyembunyikan jadual.

1. Gunakan display:none

Pertama, kita boleh menggunakan atribut display:none untuk menyembunyikan baris atau lajur dalam jadual. Kaedah pelaksanaan khusus adalah untuk memilih label baris atau lajur untuk disembunyikan dan menambah atribut display:none supaya ia tidak dipaparkan pada halaman.

Sebagai contoh, jadual berikut mengandungi 5 sel:

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

Jika kita ingin menyembunyikan sel ketiga, kita boleh memilih label td di mana ia terletak dan menambah paparan: atribut tiada :

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td style="display:none;">3</td>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

Dengan cara ini, lajur ketiga dalam jadual disembunyikan.

2. Gunakan visibility:hidden

Gunakan atribut visibility:hidden untuk menyembunyikan baris atau lajur dalam jadual. Perbezaan daripada display:none ialah menggunakan atribut visibility:hidden boleh menyembunyikan elemen tetapi mengekalkan ruang yang didudukinya, semasa menggunakan display:none tidak mengekalkannya.

Berikut ialah contoh: kami ingin menyembunyikan baris 2 dalam jadual:

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr style="visibility:hidden;">
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>

Dengan cara ini, baris 2 dalam jadual disembunyikan.

3. Gunakan kelegapan:0

Selain menggunakan display:none dan visibility:hidden, anda juga boleh menggunakan atribut opacity:0 untuk menyembunyikan baris atau lajur dalam jadual. Kaedah ini serupa dengan visibility:hidden dan juga boleh mengekalkan ruang yang diduduki oleh elemen.

Sebagai contoh, kita ingin menyembunyikan sel ke-4:

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td style="opacity:0;">4</td>
    <td>5</td>
  </tr>
</table>

Dengan cara ini, lajur ke-4 dalam jadual disembunyikan.

Ringkasan:

Tiga kaedah di atas boleh menyembunyikan baris atau lajur dalam jadual dengan berkesan, tetapi kaedah mana yang hendak digunakan perlu dipilih mengikut situasi tertentu. Jika anda hanya perlu menyembunyikan elemen tanpa mengekalkan kedudukan, gunakan display:none jika anda perlu mengekalkan kedudukan, gunakan visibility:hidden atau opacity:0. Sama ada cara, mereka semua perlu dilaksanakan menggunakan CSS.

Selain daripada itu, terdapat cara untuk menyembunyikan jadual menggunakan JavaScript atau perpustakaan skrip seperti jQuery, tetapi ini di luar skop artikel ini. Saya harap kaedah yang diperkenalkan di atas dapat membantu anda.

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