HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
作者:hebedich 发布时间:2024-04-29 13:38:31
BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好。一些重量级的JS组件库也都有这个功能,那么有没有更简单的方法实现这个功能呢?
这个需求常见的解决方案是使用表格拼接的方法,这个方案如果要制作静态的网页,或者功能简单的动态页面,逻辑比较简单,技术上也不复杂,很容易实现,但是如果要做成组件,动态功能较多的话,就需要写大量的冗余代码,难以维护,甚至于一个简单的功能,都需要写很多的代码,比如事件处理等,这个方法就显得比较笨拙,灵活性很差,不是一个好的方案。
经过长时间的分析研究,各种场景的试验,我们找到了一个兼容性非常好的解决方案,总体上来讲采用的是定位计算的方法,下面贴出代码,然后做个解读。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function divScroll(scrollDiv){
var scrollLeft = scrollDiv.scrollLeft;
document.getElementById("tableDiv_title").scrollLeft = scrollLeft;
document.getElementById("tableDiv_body").scrollLeft = scrollLeft;
}
function divYScroll(scrollYDiv){
var scrollTop = scrollYDiv.scrollTop;
document.getElementById("tableDiv_y").scrollTop = scrollTop;
}
function onwheel(event){
var evt = event||window.event;
var bodyDivY = document.getElementById("tableDiv_y");
var scrollDivY = document.getElementById("scrollDiv_y");
if (bodyDivY.scrollHeight>bodyDivY.offsetHeight){
if (evt.deltaY){
bodyDivY.scrollTop = bodyDivY.scrollTop + evt.deltaY*7;
scrollDivY.scrollTop = scrollDivY.scrollTop + evt.deltaY*7;
}else{
bodyDivY.scrollTop = bodyDivY.scrollTop - evt.wheelDelta/5;
scrollDivY.scrollTop = scrollDivY.scrollTop - evt.wheelDelta/5;
}
}
}
</script>
<style type="text/css">
body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border:0;
border:none;
}
table td {
border:1px solid #000;
overflow:hidden;
padding:0 2px;
}
</style>
</head>
<body>
<div style="width:500px; position:relative; padding-right:18px;">
<div style="position:relative;height:368px;overflow:hidden;width:100%">
<div style="padding-left:108px; width:auto; overflow:hidden; background:#f00;" id="tableDiv_title" >
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td style="min-width:30px; max-width:30px; left:0; top:0; width:30px; overflow:hidden; background-color:#f00;position:absolute;z-index:1;">000</td>
<td style="min-width:74px; max-width:74px; left:30px; top:0; width:74px; overflow:hidden; background-color:#f00;position:absolute;z-index:1;">自动表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
</table>
</div>
<div style="overflow:hidden; position:absolute;height:128px; width:100%;" id="tableDiv_y" onmousewheel="onwheel(event);" onwheel="onwheel(event);">
<div style="padding-left:108px; width:auto;overflow:hidden;" id="tableDiv_body">
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">001</td>
<td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff; position:absolute; z-index:1;">002</td>
<td style="min-width:74px; max-width:74px; left:30px; width:74px; overflow:hidden;background-color:#fff; position:absolute; z-index:1;">自动表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">003</td>
<td style="min-width:74px; max-width:74px;left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">004</td>
<td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">005</td>
<td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">006</td>
<td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">007</td>
<td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">008</td>
<td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">009</td>
<td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">010</td>
<td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
</table>
</div>
</div>
<div style="background-color:#eee;overflow:hidden;top:150px; width:100%; z-index:2;position:absolute;">
<div style="margin-left:108px; width:auto;overflow-x:scroll;overflow-y:hidden;" onscroll='divScroll(this);'>
<div style="width:630px; height:1px;"></div>
</div>
</div>
</div>
<div id="scrollDiv_y" style="display:block; overflow-x:hidden; overflow-y:scroll; position:absolute; top:22px; right:0px; height:118px; padding-bottom:10px;" onscroll='divYScroll(this);'>
<div style="width:1px; height:194px;"></div>
</div>
</div>
</div>
</body>
</html>
一、总体结构:
页面基本元素为DIV+TABLE,固定的列采用绝对定位的方式固定,每一列都要指定固定宽度,为了解决横竖滚动条的问题,表头和表体的外面分别包裹两层DIV,滚动条采用虚拟的方式,固定在固定位置通过JS控制模拟正常DIV滚动条的效果。
二、定位:
固定的列要绝对定位,通过left属性控制左侧位移,为了保证固定列浮动在上方,设置z-index为1,。为了保证有竖滚动条时的正常显示,表体的外层DIV为绝对定位,由此导致滚动条也都要绝对定位。还有,表头和表体以及滚动条的内层DIV通过margin-left属性控制左侧外边距,把固定列的偏移量空余出来。
二、宽度计算:
每一列的宽度都要指定固定的值,并且要注意一个关键点,就是还要加上min-width和max-width属性,这两个属性和width值相等,表头表体的内层DIV,宽度为auto,自适应表格宽度,外层DIV宽度为100%,最外层的DIV通过padding-right属性控制右侧内边距,将竖滚动条的位置空余出来。
三、高度计算:
因为绝对定位的存在,整个表格组件的高度要指定,可以通过计算得出,竖滚动条的top值也需要进行计算。
四、滚动条:
本方案一个突出特点,就是虚拟的滚动条,就是通过一个和表格一样宽、高度为一个像素的DIV模拟出表体DIV的横向滚动条,竖滚动条同理。之所以采用这个形式,一个是横向滚动条这样处理比较美观,竖滚动条这样处理之后,表头和表体的外层DIV宽度不用计算了,都为100%,否则存在滚动条时,表头和横向滚动条要空出竖滚动条宽度的位移,否则无法对齐,这个计算倒不复杂,但是某些情况下存在问题,在此不展开了。
五、滚动事件:
因为表体的滚动条都隐藏了,导致鼠标滚轮不起作用了,这样就需要用JS处理鼠标滚轮事件,本文的样例代码兼容常见浏览器。这里的重点是同时写了onmousewheel和onwheel事件,onmousewheel兼容IE,在计算滚动距离时,注意deltaY和wheelDelta属性的差异即可。
六、优缺点分析:
本文的解决方案已经经过精简,重点是讲清楚原理,在我们的实际中,非常的复杂。这个设计考虑了非常多的兼容性,包括了浏览器的兼容性和各种场景的兼容性,如果需求简单,还有简化的空间。
这个方案的优点是,如果要做组件的话,因为HTML结构简单,表头和表体都是一个TABLE,JS控制代码非常干净,维护容易。缺点就是计算过多。我们认为该方案比较适用于开发组件的情况,静态页面就有点小题大作了。
以上所述就是本文的全部内容了,希望大家能够喜欢。
猜你喜欢
- 环境:MacOS_Cetalina_10.15.1、Mysql8.0.18、Docker_2.0.0.31、docker仓库搜索mysqld
- 因为旧电脑不幸挂了,所以要在新电脑上面重新安装Python。一看官网发现已经更新到3.8.5+了,乖乖,真是迭代快啊。虽然之前安装过一次,不
- python检查值是否已经存在于字典列表中a = [ {'main_color': 're
- 1、设置字体、风格代码主题选择Monokai会是彩色的代码。2、配置CI代码提示<1>下载代码提示项目:https://gith
- 一.设置客户端网络实用工具点击“开始”-“程序”,在“Microsoft SQL Server”菜单中选择“客户端网络实用工具”。在“别名”
- 常用php函数实现及介绍countcount是我们经常用到的一个函数,其功能是返回一个数组的长度。count这个函数,其复杂度是多少呢? 一
- Stochastic Depth论文:Deep Networks with Stochastic Depth本文的正则化针对于ResNet中
- 目录1.爬虫文件2.items.py3.pipelines.py4.进行持久化存储之前我们使用lxml对梨视频网站中的视频进行了下载,感兴趣
- 先看实际效果,现在时间2018.4.26使用python脚本按照年月日生成多级目录,创建的目录可以将系统生成的日志文件放入其中,方便查阅,代
- 前言大家好,这次写作的目的是为了加深对数据可视化pyecharts的认识,也想和大家分享一下。如果下面文章中有错误的地方还请指正,哈哈哈!!
- 前言离过年还有十多天,在这里提前祝各位小伙伴新年快乐呀~先说句题外话:疫情还是比较严峻,各位小伙伴要是出门的话一定要做好防护措施呀,不出门的
- 我们在开发项目的时候经常会在后台管理时用到批量展示功能来动态的修改数据库的值。下面以修改数据库的status状态值来实现批量展示功能。批量选
- 前言在跑项目时,常常会安装很多的包,也通常会遇到需要安装指定版本的包,以及包与包不兼容的问题。比如:在项目1中安装librosa时,会自动安
- 在提交添加或修改内容时,需要对关键数据进行判空处理,如何在js中判断checkboxlist是否有选择项呢? 具体操作如下: var Che
- 如下所示:numpy.power(x1, x2)数组的元素分别求n次方。x2可以是数字,也可以是数组,但是x1和x2的列数要相同。 >
- 实时画图import matplotlib.pyplot as pltax = [] # 定义一个 x 轴的空列表用来接收动态
- mysql行转列、列转行 语句不难,不做多余解释了,看语句时,从内往外一句一句剖析行转列 &nb
- 本文介绍了6个asp常用的判断函数的语法和使用方法,有IsArray 函数,IsDate 函数 ,IsEmpty 函数,IsNull 函数,
- 机器学习可应用在各个方面,本篇将在系统性进入机器学习方向前,初步认识机器学习,利用线性回归预测波士顿房价;原理简介利用线性回归最简单的形式预
- 类与实例类与实例相互关联着:类是对象的定义,而实例是“真正的实物”,它存放了类中所定义的对象的具体信息。下面的示例展示了如何创建一个类:cl