纯css实现固定表头和锁定列（html固定表头怎么设置）
itomcoil 2025-02-04 14:23 9 浏览
### table
表格是一个网站很常用的元素，用以展示大量的数据。在处理表格时，通常会加入许多功能，如斑马线、选中高亮、固定表头、锁定列等等，本篇文章主要介绍如何单纯的使用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>
<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部分如下
```
<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测试各测试了两台，均是可以的，但是测试的机型不全，需要自行多测试
相关推荐
- Excel新函数TEXTSPLIT太强大了，轻松搞定数据拆分!
-
我是【桃大喵学习记】，欢迎大家关注哟~，每天为你分享职场办公软件使用技巧干货！最近我把WPS软件升级到了版本号：12.1.0.15990的最新版本，最版本已经支持文本拆分函数TEXTSPLIT了，并...
- Excel超强数据拆分函数TEXTSPLIT，从入门到精通!
-
我是【桃大喵学习记】，欢迎大家关注哟~，每天为你分享职场办公软件使用技巧干货！今天跟大家分享的是Excel超强数据拆分函数TEXTSPLIT，带你从入门到精通！TEXTSPLIT函数真是太强大了，轻松...
- 看完就会用的C++17特性总结（c++11常用新特性）
-
作者：taoklin，腾讯WXG后台开发一、简单特性1.namespace嵌套C++17使我们可以更加简洁使用命名空间：2.std::variant升级版的C语言Union在C++17之前，通...
- plsql字符串分割浅谈（plsql字符集设置）
-
工作之中遇到的小问题，在此抛出问题，并给出解决方法。一方面是为了给自己留下深刻印象，另一方面给遇到相似问题的同学一个解决思路。如若其中有写的不好或者不对的地方也请不加不吝赐教，集思广益，共同进步。遇到...
- javascript如何分割字符串（javascript切割字符串）
-
javascript如何分割字符串在JavaScript中，您可以使用字符串的`split()`方法来将一个字符串分割成一个数组。`split()`方法接收一个参数，这个参数指定了分割字符串的方式。如...
- TextSplit函数的使用方法(入门+进阶+高级共八种用法10个公式)
-
在Excel和WPS新增的几十个函数中，如果按实用性+功能性排名，textsplit排第二，无函数敢排第一。因为它不仅使用简单，而且解决了以前用超复杂公式才能搞定的难题。今天小编用10个公式，让你彻底...
- Python字符串split()方法使用技巧
-
在Python中，字符串操作可谓是基础且关键的技能，而今天咱们要重点攻克的“堡垒”——split()方法，它能将看似浑然一体的字符串，按照我们的需求进行拆分，极大地便利了数据处理与文本解析工作。基本语...
- go语言中字符串常用的系统函数（golang 字符串）
-
最近由于工作比较忙,视频有段时间没有更新了,在这里跟大家说声抱歉了,我尽快抽些时间整理下视频今天就发一篇关于go语言的基础知识吧!我这我工作中用到的一些常用函数,汇总出来分享给大家,希望对...
- 无规律文本拆分，这些函数你得会（没有分隔符没规律数据拆分）
-
今天文章来源于表格学员训练营群内答疑，混合文本拆分。其实拆分不难，只要规则明确就好办。就怕规则不清晰，或者规则太多。那真是，Oh,mygod.如上图所示进行拆分，文字表达实在是有点难，所以小熊变身灵...
- Python之文本解析:字符串格式化的逆操作?
-
引言前面的文章中，提到了关于Python中字符串中的相关操作，更多地涉及到了字符串的格式化，有些地方也称为字符串插值操作，本质上，就是把多个字符串拼接在一起，以固定的格式呈现。关于字符串的操作，其实还...
- 忘记【分列】吧，TEXTSPLIT拆分文本好用100倍
-
函数TEXTSPLIT的作用是：按分隔符将字符串拆分为行或列。仅ExcelM365版本可用。基本应用将A2单元格内容按逗号拆分。=TEXTSPLIT(A2,",")第二参数设置为逗号...
- Excel365版本新函数TEXTSPLIT，专攻文本拆分
-
Excel中字符串的处理，拆分和合并是比较常见的需求。合并，当前最好用的函数非TEXTJOIN不可。拆分，Office365于2022年3月更新了一个专业函数：TEXTSPLIT语法参数：【...
- 站长在线Python精讲使用正则表达式的split()方法分割字符串详解
-
欢迎你来到站长在线的站长学堂学习Python知识，本文学习的是《在Python中使用正则表达式的split()方法分割字符串详解》。使用正则表达式分割字符串在Python中使用正则表达式的split(...
- Java中字符串分割的方法（java字符串切割方法）
-
技术背景在Java编程中，经常需要对字符串进行分割操作，例如将一个包含多个信息的字符串按照特定的分隔符拆分成多个子字符串。常见的应用场景包括解析CSV文件、处理网络请求参数等。实现步骤1.使用Str...
- 因为一个函数strtok踩坑，我被老工程师无情嘲笑了
-
在用C/C++实现字符串切割中，strtok函数经常用到，其主要作用是按照给定的字符集分隔字符串，并返回各子字符串。但是实际上，可不止有strtok(),还有strtok、strtok_s、strto...
- 一周热门
- 最近发表
- 标签列表
-
- ps像素和厘米换算 (32)
- ps图案在哪里 (33)
- super().__init__ (33)
- python 获取日期 (34)
- 0xa (36)
- super().__init__()详解 (33)
- python安装包在哪里找 (33)
- linux查看python版本信息 (35)
- python怎么改成中文 (35)
- php文件怎么在浏览器运行 (33)
- eval在python中的意思 (33)
- python安装opencv库 (35)
- python div (34)
- sticky css (33)
- python中random.randint()函数 (34)
- python去掉字符串中的指定字符 (33)
- python入门经典100题 (34)
- anaconda安装路径 (34)
- yield和return的区别 (33)
- 1到10的阶乘之和是多少 (35)
- python安装sklearn库 (33)
- dom和bom区别 (33)
- js 替换指定位置的字符 (33)
- python判断元素是否存在 (33)
- sorted key (33)