网站首页 > 基础教程正文

纯css实现固定表头和锁定列

ccvgpt 2025-01-16 18:17:10 基础教程 1 ℃

### table

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

纯css实现固定表头和锁定列

### 一般做法

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

### 本文做法

主要使用了二个css属性

* table-layout: fixed

* posotion: sticky

### table-layout

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

```css

table {

table-layout: fixed;

width: 100%;

}

```

### position

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

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

**注意:** `posotion: sticky`应用于table时，只能作用于`<th>`和`<td>`，并且必须定义目标位置left / right / top / bottom来实现固定效果

```

thead tr th {

position:sticky;

top:0;

}

```

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

```html

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<div>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr> <tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</body>

</html>

```

css部分如下

```

<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>

```

最后的效果如下：

### 注意

* z-index很重要，需要仔细设置，尤其是对于ios

* 如果是固定多列，每一列需要注意设置好left的值

* 自测时，手机端安卓与ios测试各测试了两台，均是可以的，但是测试的机型不全，需要自行多测试

上一篇： html+js+css 实现拖拽工作进度
下一篇： css基础篇11--表格样式

网站首页 > 基础教程 正文

纯css实现固定表头和锁定列

猜你喜欢

网站首页 > 基础教程正文