<html lang="zh-CN" class=""><head> <meta charset="UTF-8"> <title>CodePen Demo</title> <style> .table-container { width: 50%; height: 200px; border: solid 1px #cccccc; margin: 10px auto; background: #FFF; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; padding-top: 50px; overflow: hidden; } .table-container-inner { overflow-x: hidden; overflow-y: auto; height: 100%; } .table-header-fixed { width: 100%; background: #FFF; overflow-x: hidden; overflow-y: auto; } th, td, span { text-align: left; } th span { position: absolute; top: 0; width: 100%; display: block; line-height: 50px; border-left: solid 1px #3a84ac; border-bottom: solid 1px #cccccc; padding-left: 5px; margin-left: -5px; font-weight: 400; letter-spacing: 1px; color: #FFF; background: #549DC5; } </style> </head> <body> <div class="container" role="main"> <center> <h1>CSS - Fixed Header With Variable Width Table</h1> </center> <div class="table-container"> <div class="table-container-inner"> <table class="table-header-fixed"> <thead> <tr> <th> <span>First</span> </th> <th> <span>Second</span> </th> <th> <span>Third</span> </th> <th> <span>Forth</span> </th> </tr> </thead> <tbody> <tr> <td data-col="first">First</td> <td data-col="second">Second</td> <td data-col="third">Third</td> <td data-col="third">Forth</td> </tr> <tr> <td data-col="first">First</td> <td data-col="second">Second222222222222222222222222222</td> <td data-col="third">Third</td> <td data-col="third">Forth</td> </tr> <tr> <td data-col="first">First</td> <td data-col="second">Second</td> <td data-col="third">Third</td> <td data-col="third">Forth</td> </tr> <tr> <td data-col="first">First</td> <td data-col="second">Second</td> <td data-col="third">Third</td> <td data-col="third">Forth</td> </tr> <tr> <td data-col="first">First</td> <td data-col="second">Second</td> <td data-col="third">Third</td> <td data-col="third">Forth</td> </tr> <tr> <td data-col="first">First</td> <td data-col="second">Second</td> <td data-col="third">Third</td> <td data-col="third">Forth</td> </tr> <tr> <td data-col="first">First</td> <td data-col="second">Second</td> <td data-col="third">Third</td> <td data-col="third">Forth</td> </tr> <tr> <td data-col="first">First</td> <td data-col="second">Second</td> <td data-col="third">Third</td> <td data-col="third">Forth</td> </tr> <tr> <td data-col="first">First</td> <td data-col="second">Second</td> <td data-col="third">Third</td> <td data-col="third">Forth</td> </tr> <tr> <td data-col="first">First</td> <td data-col="second">Second</td> <td data-col="third">Third</td> <td data-col="third">Forth</td> </tr> </tbody> </table> </div><!-- /fixed-table-container-inner --> </div><!-- /fixed-table-container --> </div><!-- /container --> </html>
第2种方法:
在包含table的页面添加以下css即可
table thead {
display:table;
width: 100%;
background-color: lightblue;
position: fixed;
}
table{
table-layout:fixed;
}
方法3在包含table的页面添加以下css即可(目前最好的方案)
table { text-align: left; position: relative; border-collapse: collapse; } thead th { text-align: center; } th { position: sticky; background-color: #fff; top: 0; /* Don't forget this, required for the stickiness */ }
可参考 https://dev.to/jennieji/so-hard-to-make-table-header-sticky-14fj
同时固定列和头部https://stackoverflow.com/questions/52353159/positionsticky-cant-get-both-top-and-left-to-work
https://blog.p2hp.com/archives/7673
固定列请参考 https://blog.p2hp.com/archives/7680
注意:position: sticky 发现当 sticky 元素(祖先)容器使用了 overflow: hidden 时,sticky 就失效了。
最后更新于 2020年12月19日
相关博文
html table表格固定头部(thead)效果