Artikel ini memperkenalkan implementasi fiksasi header Tabel html dan membagikannya kepada semua orang. Detailnya adalah sebagai berikut:
<div class=wrapbox> <div class=table-head> <table> <thead> <th width=10%>Nomor kontrak</th> <th width=30%>Pelanggan yang dikontrak</th> <th width= 20%>Lepaskan pelanggan</th> <th width=10%>Status kontrak</th> <th width=30%>Lepaskan kuota siklus dari ketentuan yang dipilih</th> </thead> </table> </ div > <kelas div=badan-tabel> <tabel> <tbody id=tbody> </tbody> </tabel> </div></div>
Lihatlah cssnya
*{ bantalan:0; margin:0; } th{ batas:1px padat #e6e6e6; tinggi garis: 5vh; warna:#666666; ; } td { bantalan:5 piksel; batas:1 piksel padat #e6e6e6; } .table-head{padding-right:17px;background-color:rgb(207, 231, 179);color:#000;height:5vh;} .table-body{width:100%; height:94vh;overflow -y:scroll;} .table-head table,.table-body table{width:100%;} .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;} .table-body tabel tr:hover { background-color:rgb(240, 249, 228);Klik untuk melihat efeknya
Faktanya, poin kuncinya adalah
1. Gunakan tag colgroup untuk menentukan lebar kolom tabel atas dan bawah agar tetap konsisten.
2. Div atas .table-head menambahkan gaya padding-right: 17px. Lebar ini untuk memastikan bahwa itu konsisten dengan bilah gulir div bawah .table-body -body menambahkan gaya overflow- y:scroll;
Selama Anda memastikan dua poin di atas, Anda juga dapat membuat tabel dengan header tetap, dan pada saat yang sama, masalah ketidaksejajaran kolom atas dan bawah tidak akan terjadi.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.