This article introduces the implementation of html Table header fixation and shares it with everyone. The details are as follows:
<div class=wrapbox> <div class=table-head> <table> <thead> <th width=10%>Contract number</th> <th width=30%>Contracted customer</th> <th width= 20%>Release customers</th> <th width=10%>Contract status</th> <th width=30%>Release cycle quota of selected conditions</th> </thead> </table> </ div> <div class=table-body> <table> <tbody id=tbody> </tbody> </table> </div></div>
Take a look at 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; }Click to see the effect
In fact, the key point is
1. Use the colgroup tag to define the column widths of the upper and lower tables to keep them consistent.
2. The upper div .table-head adds the style padding-right: 17px. This width is to ensure that it is consistent with the scroll bar of the lower div .table-body. At the same time, the lower table .table-body adds the style overflow- y:scroll;
As long as you ensure the above two points, you can also make a table with a fixed header, and at the same time, the problem of misalignment of the upper and lower columns will not occur. Tried and tested!
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.