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;

}

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

Title

css部分如下

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;

}

最后的效果如下：

GIF3.gif

注意

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

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

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

html 固定表头和左侧列,纯css实现固定表头和锁定列相关推荐

如何使用纯CSS实现固定宽高比div？
在很多场景下,我们都需要一个固定长宽比的div作为容器.直接使用js动态设置固然可行,但在页面大小变化时就不得不通过触发onresize事件来动态设置,十分不便.此文旨在于探讨使用纯CSS实现固定长宽 ...
antd 设置表头属性_纯css实现固定表头和锁定列
### table 表格是一个网站很常用的元素,用以展示大量的数据.在处理表格时,通常会加入许多功能,如斑马线.选中高亮.固定表头.锁定列等等,本篇文章主要介绍如何单纯的使用css实现固定行或列的功能 ...
html固定表的属性是什么,css如何固定表头
css如何固定表头实现头部导航栏固定用到的属性是:position:sticky . 粘性定位元素(stickily positioned element)是计算后位置属性为 sticky 的元素. ...
纯CSS实现table表头固定（自创备忘）
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...
淘宝分类导航条；纯css实现固定导航栏
效果如下: 页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
纯CSS无hacks的跨游览器多列布局(转)
转自:http://www.cnblogs.com/rubylouvre/archive/2009/07/15/1523683.html 翻译自Matthew James Taylor的Equal H ...
纯CSS无hacks的跨游览器多列布局
利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中 ...
EAS BOS 代码隐藏分录列、锁定列、锁定单元格
kdtEntry.getColumn("unit").getStyleAttributes().setHided(true);//隐藏列 kdtEntry.getColumn(&q ...
关于如何使用原生实现表格固定列，纯 CSS 实现
在使用 HTML 的表格标签时,当表格项过多时,左右拉动时,希望固定几列不随水平滚动条滚动,表头也不随竖直方向滚动而滚动.在使用组件库的时候,通常都有成熟的API. 思路一: 是在查找资料中发现的,创 ...
css 固定列头,表格头部固定和表格列固定
我不是前端大神,只是偶尔在开发系统时,需要用到表格.如果表格只需要单独的用来展现数据,那就很简单了,那如果需要实现复杂的样式呢?比如说表头固定,当网页滚动的时候,表头自动固定到网页顶部,这样很客观的展 ...

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

html 固定表头和左侧列,纯css实现固定表头和锁定列相关推荐

最新文章

热门文章