html table固定表头 css,使用css固定table表头

这篇文章上次修改于 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