本文介紹了html Table 表頭固定的實現，分享給大家，具體如下：
<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 class=table-body> <table> <tbody id=tbody> </tbody> </table> </div></div>
看看css
*{ padding:0; margin:0; } th{ border:1px solid #e6e6e6; line-height: 5vh; color:#666666; font-size: 16px; } table { border-collapse: collapse; width: 16px; } table { border-collapse: collapse; width: 1000% ; } td { padding:5px; border:1px solid #e6e6e6; font-size: 14px; } .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 table tr:hover { background-color :rgb(240, 249, 228); transition: .2s; }點擊看效果
其實關鍵之處在於
1.使用了colgroup標籤，來對上下兩個表格的列寬進行了定義，讓他們保持一致。
2.上邊的div .table-head添加了樣式padding-right:17px，這個寬度是為了保證跟下邊的div .table-body的滾動條保持一致，同時下邊的表格.table-body添加了樣式overflow- y:scroll;
只要保證上述兩點的話，你也可以做出固定表頭的表格來，同時不會發生上下的列不對齊的問題，屢試不爽！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。