前言
最近有个需求,渲染一个很复杂的table表格,不能用框架实现,使用原生table数据量一大就看不到表头需要固定表头,本篇文章当备份吧
代码
代码语言：javascript复制<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>
