html 固定表头和左侧列,纯css实现固定表头和锁定列

table

表格是一个网站很常用的元素，用以展示大量的数据。在处理表格时，通常会加入许多功能，如斑马线、选中高亮、固定表头、锁定列等等，本篇文章主要介绍如何单纯的使用css实现固定行或列的功能。

一般做法

大部分的网上介绍的实现方式，甚至部分ui框架如iview等都是通过三至四个表格组合，然后js处理同步滚动来实现，这样的好处是容易实现，pc端也不会出现什么问题。但是在手机端时，会有严重的不同步滚动现象，处理的不好时，甚至会出现错位等，体验非常不好。

本文做法

主要使用了二个css属性

table-layout: fixed

posotion: sticky

table-layout

为了让表格呈现滚动效果，必须设定table-layout: fixed，并且给与表格宽度

table {

table-layout: fixed;

width: 100%;

}

position

固定表格的行列需要使用到posotion: sticky设定

sticky的表现类似于relative和fixed的合体，在超过目标区域时，他会固定于目标位置

注意: posotion: sticky应用于table时，只能作用于

和，并且必须定义目标位置left / right / top / bottom来实现固定效果

thead tr th {

position:sticky;

top:0;

}

简单说明这两个属性后，我们首先建立一个带表格