Bagaimanakah Saya Boleh Membuat TBody Meja Boleh Ditatal dengan Ketinggian Tetap?

Menetapkan Ketinggian TBody dengan Tatal Limpahan

Apabila cuba menetapkan ketinggian badan jadual (tbody) dengan tatal limpahan, pengguna mungkin menghadapi kesukaran. Berikut ialah panduan langkah demi langkah untuk mencapai hasil yang diingini:

Untuk memastikan badan itu memaparkan bar skrol, nyatakan sifat paparannya sebagai blok. Ini akan membenarkan kandungan mengalir secara menegak.

Seterusnya, tetapkan sifat paparan setiap elemen tr dalam badan kepada jadual. Ini akan mengekalkan kelakuan seperti jadual bagi baris.

Untuk mengagihkan sel secara sama rata, gunakan susun atur jadual: tetap; harta pada elemen jadual induk. Ini memastikan bahawa semua sel mempunyai lebar yang sama dan menghalang jadual daripada runtuh.

Adalah penting untuk ambil perhatian bahawa pendekatan moden mengutamakan reka letak Grid berbanding teknik yang diterangkan di sini. Reka letak grid menawarkan kawalan yang lebih baik dan kesan sampingan yang lebih sedikit.

Berikut ialah contoh CSS untuk menunjukkan penyelesaian:

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;
}

Jika badan masih tidak memaparkan bar skrol kerana kandungan yang tidak mencukupi, secara eksplisit tetapkan sifat limpahan-y untuk menatal.

Walau bagaimanapun, adalah penting untuk mengakui kelemahan tertentu pendekatan ini:

• Ia memisahkan grid sel kepala dan badan, yang berpotensi menjejaskan penjajaran.
• Terdapat alternatif yang lebih baik pada masa kini, seperti reka letak Grid, yang mengelakkan isu ini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat TBody Meja Boleh Ditatal dengan Ketinggian Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!