Alih keluar sempadan daripada jadual html

Alih keluar sempadan daripada jadual HTML

Dalam halaman web HTML, jadual ialah cara biasa untuk memaparkan data berstruktur. Selain warna sel, penjajaran kandungan, dsb., penampilan jadual yang paling biasa ialah sempadan. Secara lalai, jadual HTML memaparkan sempadan untuk membezakan kandungan jadual dengan lebih baik. Walau bagaimanapun, dalam beberapa kes, kita perlu mengalih keluar sempadan jadual untuk disepadukan dengan lebih baik ke dalam reka bentuk keseluruhan halaman. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mengalih keluar sempadan daripada jadual HTML.

Kaedah 1: Gunakan atribut sempadan

Kaedah yang paling biasa ialah menggunakan atribut sempadan CSS. Sifat sempadan digunakan untuk menetapkan gaya sempadan, warna dan lebar. Kita boleh menetapkan lebar kepada 0 dan gaya serta warna kepada tiada untuk mencapai kesan mengalih keluar sempadan. Seperti yang ditunjukkan di bawah:

table {
  border-collapse: collapse; /* 合并边框，避免两条边框相交时出现两倍线的现象 */
}

td, th {
  border: none; /* 去掉单元格边框 */
}

Antaranya, atribut keruntuhan sempadan digunakan untuk menggabungkan sempadan sel bersebelahan untuk mengelakkan fenomena garisan berkembar apabila dua sempadan bersilang.

Kelebihan kaedah ini ialah ia ringkas dan mudah digunakan serta kodnya pendek dan padat. Pada masa yang sama, ia juga sesuai untuk mengalih keluar sempadan sel tertentu. Hanya menambah sempadan: tiada pada elemen td atau ke.

Kaedah 2: Gunakan pemilih CSS

Menggunakan pemilih CSS boleh memilih sel yang perlu dialih keluar sempadannya dengan lebih tepat, mencapai kesan yang lebih fleksibel. Mengambil penyingkiran sempadan baris pertama sel sebagai contoh, kodnya adalah seperti berikut:

table {
  border-collapse: collapse;
}

tr:first-child td, tr:first-child th {
  border-top: none;
}

Antaranya, tr:first-child digunakan untuk memilih baris pertama, td dan th digunakan untuk memilih sel biasa dan sel pengepala . Sifat atas sempadan digunakan untuk mengalih keluar sempadan atas.

Selepas mengalih keluar semua sempadan sel dalam baris pertama, jadual akan menjadi lebih ringkas dan jelas. Pada masa yang sama, dalam beberapa kes, kami juga boleh memilih untuk mengalih keluar sempadan kiri atau kanan sahaja, atau mengalih keluar semua baris dalaman, yang boleh dicapai melalui pemilih CSS.

Perlu diambil perhatian bahawa kod untuk menggunakan pemilih CSS untuk mengalih keluar sempadan agak menyusahkan dan memerlukan pemahaman tertentu tentang struktur jadual. Oleh itu, dalam reka bentuk web yang mudah, kami lebih banyak menggunakan kaedah pertama, manakala dalam reka bentuk web yang kompleks, kami lebih cenderung menggunakan kaedah kedua.

Ringkasan

Mengalih keluar sempadan jadual HTML ialah teknik biasa. Kita boleh menggunakan atribut sempadan CSS atau pemilih CSS untuk mencapai ini. Kedua-dua kaedah mempunyai kelebihan dan batasannya yang tersendiri dan perlu dipilih mengikut situasi tertentu. Dalam reka bentuk web sebenar, kita boleh membuat pilihan berdasarkan struktur dan keperluan meja untuk menjadikan meja lebih cantik, kemas dan mudah diselenggara.

Atas ialah kandungan terperinci Alih keluar sempadan daripada jadual html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!