Mengapa Gaya Sempadan Tidak Berfungsi pada Pengepala Jadual Kedudukan Melekit, dan Bagaimana Saya Boleh Membetulkannya?

Gaya Sempadan Tidak Berfungsi dengan Elemen Kedudukan Melekit

Kedudukan melekit ialah sifat CSS berguna yang membolehkan elemen kekal pada tempatnya pada skrin, walaupun apabila pengguna menatal ke bawah halaman. Walau bagaimanapun, mungkin terdapat komplikasi apabila anda cuba menggunakan gaya sempadan pada elemen melekit.

Isu:

Dalam contoh yang disediakan, pengepala jadual ditetapkan menjadi gaya sempadan melekit dan sebaris telah digunakan pada elemen. Walau bagaimanapun, gaya sempadan tidak muncul apabila jadual ditatal, meninggalkan pengepala tidak digayakan.

Punca:

Konflik timbul kerana penggunaan sempadan- runtuh: runtuh. Dengan sifat ini, sempadan sel jadual bersebelahan runtuh dan bergabung bersama. Apabila digabungkan dengan pengepala melekit, sempadan yang digabungkan hilang semasa menatal.

Penyelesaian:

Untuk mengatasi isu ini, anda boleh menggunakan runtuhan sempadan: berasingan, yang menghalang keruntuhan sempadan. Selain itu, anda harus menyesuaikan sempadan anda untuk terletak pada bahagian tertentu sel dan pengepala. Ini memastikan bahawa sempadan kekal melekat dan kelihatan walaupun semasa menatal.

Penyelesaian CSS:

#wrapper {
  width: 100%;
  height: 150px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: separate; /* Don't collapse */
  border-spacing: 0;
}

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

table td {
  /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
  border-bottom: 2px solid;
  border-right: 2px solid;
}

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

table thead th {
  position: sticky;
  top: 0;
  background-color: #edecec;
}

Dengan menggunakan gaya ini, gaya sempadan akan kekal kelihatan walaupun apabila meja ditatal, mengekalkan reka bentuk pengepala melekit yang diingini.

Atas ialah kandungan terperinci Mengapa Gaya Sempadan Tidak Berfungsi pada Pengepala Jadual Kedudukan Melekit, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!