บทความนี้จะแนะนำการใช้งานการแก้ไขส่วนหัวของตาราง html และแบ่งปันกับทุกคนโดยมีรายละเอียดดังนี้
<div class=wrapbox> <div class=table-head> <table> <thead> <th width=10%>เลขที่สัญญา</th> <th width=30%>ลูกค้าที่ทำสัญญา</th> <th width= 20%>ปล่อยลูกค้า</th> <th width=10%>สถานะสัญญา</th> <th width=30%>ปล่อยโควต้ารอบของเงื่อนไขที่เลือก</th> </thead> </table> </ div > <คลาส div=ตัวตาราง> <ตาราง> <tbody id=tbody> </tbody> </table> </div></div>
ลองดูที่ css ครับ
*{ ระยะขอบ:0; } { เส้นขอบ: 1px solid #e6e6e6; line-height: 5vh; color:#666666; ; } td { การขยาย: 5px; เส้นขอบ: 1px ทึบ # e6e6e6; } .table-head{padding-right:17px;พื้นหลัง-สี:rgb(207, 231, 179);สี:#000;height:5vh;} .table-body{width:100%; height:94vh;overflow -y:scroll;} .table-head table, .table-body table{width:100%;} .table-body ตาราง tr:nth-child(2n+1){สีพื้นหลัง:#f2f2f2;} .table-body table tr:hover { สีพื้นหลัง:rgb(240, 249, 228); การเปลี่ยนแปลง: .2s;คลิกเพื่อดูผล
ที่จริงแล้วประเด็นสำคัญก็คือ
1. ใช้แท็ก colgroup เพื่อกำหนดความกว้างคอลัมน์ของตารางด้านบนและด้านล่างเพื่อให้สอดคล้องกัน
2. div .table-head ด้านบนเพิ่มสไตล์ padding-right: 17px ความกว้างนี้มีไว้เพื่อให้แน่ใจว่าสอดคล้องกับแถบเลื่อนของ div ด้านล่าง .table-body ในเวลาเดียวกัน .table ตารางด้านล่าง -body เพิ่มสไตล์ล้น - y:scroll;
ตราบใดที่คุณมั่นใจในสองจุดข้างต้น คุณสามารถสร้างตารางที่มีส่วนหัวคงที่ได้ และในเวลาเดียวกัน ปัญหาการจัดแนวคอลัมน์บนและล่างจะไม่เกิดขึ้น!
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network