纯CSS（基于CSS3）实现表格固定行列（附：样式与JS配置实现固定列行）

2024-06-14 21:43:58

方法一、CSS3（position:sticky）实现固定行与列

这个是我正在使用的固定行列的方式，使用的新最的CSS3样式：position:sticky。

感觉上去这个样式与position:fixed非常像。

差异在两个地方：1、但是fixed是相对于body元素，而sticky是相对于（第一个定位不为static的）父级容器；2、虽然已经定位position起来了，但是仍然还是在原来的位置进行占位。

实现步骤：

1、指定父级窗口的高与宽

2、为需要固定的单元格绑定指定样式position:sticky（搭配top与left实现行固定或列固定）

PS：请指定固定单元的格的背景色与z-index，否则会有一些意外发生

DEMO地址：https://jsfiddle.net/timfeng2009/bh27kmrf

方法二、CSS3（translateY）实现固定行头

CSS3的新属性translate，该属性允许我们对元素进行旋转、缩放、移动或倾斜。

我们使用其中的translateY，进行Y轴变形（理论可以扩展到列上进行translateX的变形），在滚动条进行滚动的时候，与滚动条同步进行Y轴变形：translateY(' + scrollTop + 'px)

实现步骤：

1、指定父级容器的高

2、在容器内绑定scroll事件，在滚动时动态调整thead的样式属性：translateY(' + scrollTop + 'px)

DEMO地址：https://jsfiddle.net/timfeng2009/17hx2y9v/

方法三、传统方案（以上因为使用CSS3的新样式属性会有兼容性方面的问题）

先了解一下传统方案：

指定容器的高宽，并设置为position:relative;
COPY需要固定的行为一个table，放置容器内并设置为position:absolute。
COPY需要固定的列为一个table，放置容器内并设置为position:absolute。
COPY需要固定的交叉列为一个table，放置容器内并设置为position:absolute。
将原table设置为position:absolute。
窗口上绑定scroll事件，动态调整三个copy出来的表格的top与left

DEMO地址：https://jsfiddle.net/timfeng2009/9dmw3xaf/

题外话：目前主流的UI框架的组件里都已经实现了表格的固定行列，懒得看的就直接用UI框架就行了。

纯CSS（基于CSS3）实现表格固定行列（附：样式与JS配置实现固定列行）相关推荐

html怎么做响应式表格,纯CSS实现响应式表格
自从转岗至腾讯云后,项目中接触到大量的数据表格.多列数据表格在空间有限的手机屏幕下,难以完美呈现,需要做响应式处理.本文介绍一种使用纯CSS实现响应式表格的方法. 通常表格中的一行代表一条项目,每列代 ...
表格html适应手机端,纯CSS实现响应式表格适应移动端
由于手机屏幕空间有限,太大的表格很难友好显示,本文介绍一种使用纯CSS实现响应式表格的方法,可以比较完美的在手机端显示. 在屏幕空间充足的情况下,我们可以将表格的每列都完全显式在屏幕上,但在手机下,每 ...
css3 烟蚊香_如何使用纯CSS实现蚊香燃烧的效果（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现传统蚊香燃烧的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载每日前端实战系列的全部源代码请从 ...
html5霓虹效果代码,纯CSS实现酷炫的霓虹灯效果(附demo)
最近关注了油管上的 CSS Animation Effects Tutorial 系列,里面介绍了非常多有意思的 CSS 动效.其中第一个就是很酷炫的霓虹灯效果,这里就实现思路做一个简单的记录和分享. ...
45个纯 CSS 实现的精美边框效果【附演示和源码】【下篇】
边框效果常用来给图片添加照片效果或用于增强页面内容片断的整体性,在一些团购网站和使用瀑布流布局的网站也经常会使用边框效果.在以前,简单的边框效果使用 CSS 可以轻松实现,但是用到阴影.弯曲和旋转等复 ...
45个纯 CSS 实现的精美边框效果【附在线演示和源码】【下篇】
边框效果常用来给图片添加照片效果或用于增强页面内容片断的整体性,在一些团购网站和使用瀑布流布局的网站也经常会使用边框效果.在以前,简单的边框效果使用 CSS 可以轻松实现,但是用到阴影.弯曲和旋转等复 ...
html自动适应布局,用纯CSS实现自适应布局表格
以手机.平板等移动设备为平台的浏览行为变得越来越平常,甚至有些人叫嚣PC将死.虽然说的有些夸张,但让你的网站布局能够兼容PC和移动设备这些需求变得越来越重要.这种网页布局就是"自适应布局&q ...
圆角按钮css,基于CSS3的一组圆角按钮 - YangJunwei
CSS3作为对CSS的升级,将原有的一些大模块分解为更小更易于表达的小模块,取得了相当的好评,也使得开发周期变短.过程变得愉快! 今天分享一下自己使用的基于CSS3的一组圆角按钮,效果不错,但欢迎升级 ...
html表格整体放大,纯CSS实现自适应布局表格
插件描述:如何让table元素也能表现出自适应性?按HTML5的说法,table是一个不鼓励使用的HTML标记,但现实工作中,我们避免不了的偶尔会用到它.那么,怎样让一个传统的表格也表现出自适应性呢? ...

最新文章

热门文章