Mengapa Badan Saya Tidak Tatal?

Mengatasi Tatal Limpahan dalam Badan Meja (tubuh)

Dalam usaha untuk menetapkan ketinggian elemen tbody sambil mendayakan penatalan limpahan, anda mungkin mengalami CSS berikut coretan:

tbody {
  height: 50px;
  display: block;
  overflow: scroll;
}

Walaupun melaksanakan penggayaan ini, elemen tbody kekal tidak bertindak balas untuk menatal. Untuk membetulkan isu ini, pertimbangkan untuk memanfaatkan peraturan CSS berikut:

• paparan: blok; untuk tbody: Ubah elemen tbody kepada elemen blok untuk membolehkan penatalan.
• paparan: jadual; untuk tr: Kekalkan kelakuan jadual dengan menetapkan sifat paparan setiap elemen tr kepada jadual.
• susun atur jadual: tetap; untuk tr dan thead: Pastikan pengedaran sel sekata dengan menggunakan susun atur jadual: tetap; untuk kedua-dua elemen tr dan thead.

table, tr td {
  border: 1px solid red;
}

tbody {
  display: block;
  height: 50px;
  overflow: auto;
}

thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead {
  width: calc(100% - 1em); /* Adjust for scrollbar width */
}

table {
  width: 400px;
}

Sekiranya elemen tbody masih gagal memaparkan bar skrol kerana kandungan yang tidak mencukupi, tetapkan sifat limpahan secara eksplisit kepada overflow-y: scroll; untuk memaksa penampilan bar skrol.

tbody {
  ...
  overflow-y: scroll;
}

Nota: Adalah penting untuk menyedari bahawa pendekatan untuk mencapai penatalan jadual ini mungkin mempunyai had dalam senario tertentu. Khususnya, ia boleh menyebabkan salah jajaran antara pengepala dan sel badan. Jika penjajaran adalah penting, pertimbangkan untuk menggunakan teknik reka letak yang lebih mantap seperti Grid CSS.

Atas ialah kandungan terperinci Mengapa Badan Saya Tidak Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!