本文介紹了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: 100%; } 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;
只要保證上述兩點的話，你也可以做出固定表頭的表格來，同時不會發生上下的列不對齊的問題，屢試不爽！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
