Bagaimana untuk Menetapkan Ketinggian badan dengan Betul dengan Tatal Limpahan dalam Jadual HTML?

Menetapkan Ketinggian tbody dengan Tatal Limpahan

Apabila bekerja dengan jadual dalam HTML, kadangkala perlu mengehadkan ketinggian elemen tbody semasa mendayakan menatal limpahan. Malangnya, menggunakan paparan: sifat tatal pada badan sahaja tidak mencukupi.

Untuk mencapai kesan yang diingini, gabungan sifat CSS diperlukan:

1. Paparan Sekat:

Tetapkan paparan: sekat pada badan untuk memecahkannya daripada aliran jadual dan biarkan ia mengambil lebar dan tingginya sendiri.

2. Ketinggian Tetap:

Nyatakan ketinggian: 50px (atau seperti yang dikehendaki) pada badan untuk menentukan ketinggiannya.

3. Paparan Jadual untuk Baris Jadual:

Tetapkan paparan: jadual pada elemen tr badan jadual untuk mengekalkan gelagatnya seperti jadual.

4. Reka Letak Jadual Tetap:

Gunakan susun atur jadual: tetap pada tr iklan dan badan untuk memastikan pengedaran sel sekata.

5. Laraskan Lebar thead:

Untuk mengimbangi lebar bar skrol, kurangkan sedikit lebar thead menggunakan lebar: calc(100% - 1em).

Contoh:

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);
}
table {
  width: 400px;
}

Nota:

Pada mulanya, bar skrol mungkin tidak muncul jika tbody kandungan adalah lebih pendek daripada ketinggian yang ditetapkan. Untuk memastikan bar skrol pada bila-bila masa, tetapkan limpahan-y: tatal pada badan.

Selain itu, adalah penting untuk mempertimbangkan pengehadan pendekatan ini berbanding pilihan lain seperti reka letak grid atau penyelesaian berasaskan JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Ketinggian badan dengan Betul dengan Tatal Limpahan dalam Jadual HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!