Mengapa Pengepala Meja Melekit Saya Hilang Sempadannya, dan Bagaimana Saya Boleh Membetulkannya?

Gaya sempadan hilang pada pengepala jadual melekit

Apabila cuba menggayakan sempadan pengepala jadual dengan kedudukan: atribut melekit, anda boleh menghadapi isu di mana sempadan lenyap. Isu ini berpunca daripada penggunaan border-collapse: collapse.

Dalam CSS, sifat runtuh sempadan menentukan cara sempadan jadual bersebelahan harus berinteraksi. Apabila keruntuhan sempadan ditetapkan untuk runtuh, sempadan antara sel dialih keluar, mewujudkan rupa bahawa satu sempadan mengelilingi semua elemen bersebelahan.

Dalam kes ini, penggunaan runtuh sempadan: runtuh boleh mengganggu yang diingini kesan kedudukan: melekit. Apabila sempadan runtuh, sempadan atas dan bawah pada tag mengalir ke dalam elemen sekeliling, termasuk jadual () itu sendiri dan baris berikut ().

Untuk menyelesaikan isu ini, anda boleh menggunakan runtuhan sempadan: asingkan bersama-sama dengan gaya sempadan yang direka dengan teliti untuk mencapai kesan yang diingini. Berikut ialah beberapa peraturan CSS yang disemak semula yang akan memastikan sempadan utuh dan tetap pada tempatnya:

/* Reset border collapse to separate */
border-collapse: separate;

/* Apply both top and bottom borders to the <th> */
table th {
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

/* For cells, apply the border to one side only */
table td {
  border-bottom: 2px solid;
  border-right: 2px solid;
}

/* Apply a left border on the first <td> or <th> in a row */
table th:first-child,
table td:first-child {
  border-left: 2px solid;
}

Dengan pengubahsuaian ini, sempadan akan dilampirkan dengan betul pada elemen pengepala jadual (), kekal tetap sementara menatal dan mengekalkan rupa yang runtuh.

Atas ialah kandungan terperinci Mengapa Pengepala Meja Melekit Saya Hilang Sempadannya, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!