一张表实现固定表头和锁定列
table
表格是一个网站很经常使用的元素，用以展现大量的数据。在处理表格时，一般会加入许多功能，如斑马线、选中高亮、固定表头、锁定列等等，本篇文章主要介绍如何单纯的使用css实现固定行或列的功能。css
通常作法
大部分的网上介绍的实现方式，甚至部分ui框架如iview等都是经过三至四个表格组合，而后js处理同步滚动来实现，这样的好处是容易实现，pc端也不会出现什么问题。可是在手机端时，会有严重的不一样步滚动现象，处理的很差时，甚至会出现错位等，体验很是很差。html
本文作法
主要使用了二个css属性ios
- table-layout: fixed
- posotion: sticky
table-layout
为了让表格呈现滚动效果，必须设定table-layout: fixed，而且给与表格宽度框架
table {
table-layout: fixed;
width: 100%;
}
position
固定表格的行列须要使用到posotion: sticky设定
sticky的表现相似于relative和fixed的合体，在超过目标区域时，他会固定于目标位置iview
注意: posotion: sticky应用于table时，只能做用于<th>和<td>，而且必须定义目标位置left / right / top / bottom来实现固定效果测试
thead tr th {
position:sticky;
top:0;
}
简单说明这两个属性后，咱们首先创建一个带表格的html页面网站
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<table cellspacing="0" border="0" cellpadding="0">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr> <tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
css部分以下ui
<style>
div{
overflow:auto;
width:400px;
height:290px; /* 固定高度 */
border:1px solid gray;
border-bottom: 0;
border-right: 0;
}
td, th {
border-right :1px solid gray;
border-bottom :1px solid gray;
width:100px;
height:30px;
box-sizing: border-box;
}
th {
background-color:lightblue;
}
table {
border-collapse:separate;
table-layout: fixed;
width: 100%; /* 固定寬度 */
}
td:first-child, th:first-child {
position:sticky;
left:0; /* 首行在左 */
z-index:1;
background-color:lightpink;
}
thead tr th {
position:sticky;
top:0; /* 第一列最上 */
}
th:first-child{
z-index:2;
background-color:lightblue;
}
</style>
最后的效果以下：
spa
注意
- z-index很重要，须要仔细设置，尤为是对于ios
- 若是是固定多列，每一列须要注意设置好left的值
- 自测时，手机端安卓与ios测试各测试了两台，均是能够的，可是测试的机型不全，须要自行多测试