Bagaimana untuk Membuat Bar Skrol Jadual HTML Muncul?

Cara memaparkan bar skrol pada jadual html

Apabila mencipta jadual dalam HTML, adalah perkara biasa untuk menghadapi situasi di mana anda ingin mengekalkan jadual yang konsisten saiz sambil memastikan kandungannya kekal boleh diakses walaupun bilangan baris berkembang di luar kawasan yang boleh dilihat. Untuk mencapai matlamat ini, anda mungkin menghadapi senario di mana anda perlu memaparkan bar skrol dalam jadual itu sendiri.

Dalam kes ini, anda mungkin telah cuba menggunakan gaya CSS seperti:

tbody {
  height: 80em;
  overflow: scroll;
}

dan memasukkannya ke dalam struktur HTML anda:

<table border=1>

Walau bagaimanapun, anda mungkin perasan bahawa walaupun melaksanakan gaya ini, bar skrol gagal muncul. Isu ini berpunca daripada fakta bahawa unsur induk teg, iaitu elemen, tidak mempunyai sifat CSS yang diperlukan untuk menampung penatalan.

Untuk menyelesaikannya, anda perlu mengubah suai peraturan CSS anda untuk menggunakan kedua-duanya pada dan elemen:

#table-wrapper {
  position: relative;
}

#table-scroll {
  height: 150px;
  overflow: auto;
  margin-top: 20px;
}

#table-wrapper table {
  width: 100%;
}

#table-wrapper table * {
  background: yellow;
  color: black;
}

#table-wrapper table thead th .text {
  position: absolute;
  top: -20px;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

Selain itu, anda perlu membalut elemen dalam <div> elemen dengan ID "table-wrapper":

<div>

Dengan melaksanakan perubahan ini, anda boleh berjaya memaparkan bar skrol dalam jadual HTML anda, membenarkan pengguna menavigasi kandungannya dengan lancar.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Bar Skrol Jadual HTML Muncul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!