HtmlTable实现固定表头
时间:2023-04-02 17:01:08
HTML
点击查看效果合约编号签约客户发布客户签约状态已选条件发布周期配额
看css*{padding:0;保证金:0;}th{border:1pxsolid#e6e6e6;行高:5vh;颜色:#666666;字体大小:16px;}table{border-collapse:collapse;宽度:100%;}td{填充:5px;边框:1px实心#e6e6e6;字体大小:14px;}.表头{padding-right:17px;background-color:rgb(207,231,179);color:#000;height:5vh;}.table-body{width:100%;height:94vh;overflow-y:scroll;}.table-headtable,.table-bodytable{width:100%;}.table-bodytabletr:nth-child(2n+1){background-color:#f2f2f2;}.table-bodytabletr:hover{背景色:rgb(240,249,228);过渡:.2s;}其实关键在于,1.colgroup标签用来定义上下表的列宽,保持一致。2、上面的div.table-head添加样式padding-right:17px。这个宽度是为了保证和下面的div.table-body的滚动条一致。同时下面的table.table-body增加了样式overflow-y:scroll;只要保证以上两点,你也可以做一个表头固定的表格,同时也不会出现上下栏错位的问题。它已经过试验和测试!