这篇文章上次修改于 202 天前,可能其部分内容已经发生变化,如有疑问可询问作者。
前言
最近有个需求,渲染一个很复杂的table表格,不能用框架实现,使用原生table数据量一大就看不到表头需要固定表头,本篇文章当备份吧
代码
CodePen Demo.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;
}
CSS - Fixed Header With Variable Width Table
First
Second
Third
Forth
FirstSecondThirdForthFirstSecond222222222222222222222222222ThirdForthFirstSecondThirdForthFirstSecondThirdForthFirstSecondThirdForthFirstSecondThirdForthFirstSecondThirdForthFirstSecondThirdForthFirstSecondThirdForthFirstSecondThirdForth