html表格左边锁定，表头锁定

去年一个项目有个表格组件一共做了1个多月才做好，大部分时间都花在找资料，调试bug，代码优化上，现在记录一下设计过程。

需求

a	b
c	d

如上图所示，区域d上下滚动的时候，区域b不能滚动；区域d左右滚动的时候，区域c不能左右滚动

第一个版本

原来的表格分成4个表格，a，b，c，d
表格d监听滚动事件，滚动时b和c跟着滚

这样有几个问题：由于客户还要求合并行列，步骤1其实没那么简单；步骤2，在电脑上看着还基本没问题，手机上看着d区域滚动时，b，c区域过了几毫秒后才开始滚动，效果十分差，这个问题也是花了1天才找到是手机的问题，因为本人使用的Angular框架，一开始以为是Angular的问题，改成了OnPush，生产模式编译后发现不卡，增加行数后又卡了，后来全部替换成原生，发现也卡，最后才定位了是手机的问题。

第二个版本

a a’	b b’
c c’	d d’

将原来的表格分成8个表格a，a’，b，b’，c，c’，d，d’，a’，b‘，c’，d’分别用定位方式覆盖在a，b，c，d上面，设置成透明
用户是不能滚动a，b，c，d的，只能滚动a’，b‘，c’，d’，d’滚动时，b，c，d一起滚动

这样做手机上虽然那几毫秒的延迟，但是dom元素太多，滚动时整体感觉有延迟，代码更加复杂不好维护

第三个版本

区域c也是整个表格，有div包住区域c超出隐藏，这样省去了拆分列的麻烦，缺点是dom元素增加了一倍

html表格左边锁定，表头锁定相关推荐

网页中单一表格横纵表头锁定
实现这个锁定表头的效果其实到有很多的方法,不过使用单一表格来实现,需要借助IE的css支持的expression表达式关键字.另外就是对浏览器布局原理的理解,如果不熟悉可以参考我原来写的两篇文章. ...
在 ASP.NET 上实现锁定表头、支持滚动的表格的做法
首先看看 CodeProject 上的两个东西 1.The Freeze Pane DataGrid (http://www.codeproject.com/aspnet/FreezePaneData ...
一个实用的表格（锁定表头，可调整单元格大小，可排序）
昨天在网上找到一个不错的表格显示,该表格可以锁定表头,可调整单元格的大小,同时还可以对数据进行排序,显示效果如下: 原代码: <!DOCTYPE HTML PUBLIC "-//W3C ...
锁定表头和固定列(Fixed table head and columns)
前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery. 因为方法很简单,就未封装成插件的形式,仅 ...
PHPExcel 锁定表头设置样式,背景颜色,居中,宽,单元格合并
//实例化类库 $objectPHPExcel = new \PHPExcel(); //选择指定的sheet $objectPHPExcel->setActiveSheetIndex(0); ...
WPS2016怎么固定/锁定表头_WPS如何设置行和列固定不动
1.将鼠标移到需要固定的行(表头所在的行)的下一行的行标题(每一行前显示当前是第几行的数字位置)上,然后点击鼠标左键选中这一行. 2.点击一下菜单栏的"视图". 3.然后点击一下视 ...
锁定表头和固定列(Fixed table head and columns)(转载)
前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery. 因为方法很简单,就未封装成插件的形式,仅 ...
发布锁定表头的一个思路
发布锁定表头的一个思路发布锁定表头的一个思路.垂直滚动时表头不动,水平滚动时表头可以同步滚动.在这里呢我只介绍我的思路,因为我觉得思路要比代码重要得多.当然我的想法已经实现了. 网页两个:一个是放置 ...
js锁定表头和列，实现类似execl锁定效果
js锁定表头和列,实现类似execl锁定效果,项目实现后效果如下: js代码 <script type="text/javascript"> function FixT ...
数据行列比较多，报表怎么实现锁定行和锁定列呢？
不过,一般报表工具都能支持这样功能,设置简单,也不用把时间花费在调整表格对齐上. 以润乾报表举例来说实现锁定表头只需要将要锁定的行列设置为报表头和左表头,页面中添加标签属性就轻松搞定了, 具体实现可以 ...

html表格左边锁定，表头锁定

需求

第一个版本

第二个版本

第三个版本

html表格左边锁定，表头锁定相关推荐

最新文章

热门文章