首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列

Posted in Javascript onApril 26, 2015

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控制代码非常干净，维护容易。缺点就是计算过多。我们认为该方案比较适用于开发组件的情况，静态页面就有点小题大作了。

以上所述就是本文的全部内容了，希望大家能够喜欢。

HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
给jqGrid数据行添加修改和删除操作链接（之一）
Nov 04 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
jquery获取节点名称
Apr 26 #Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 #Javascript
jquery插件qrcode在线生成二维码
Apr 26 #Javascript
javascript函数式编程实例分析
Apr 25 #Javascript
javascript中eval函数用法分析
Apr 25 #Javascript
javascript属性访问表达式用法分析
Apr 25 #Javascript
javascript变量声明实例分析
Apr 25 #Javascript
肯尼亚购物网站(2) 丹麦购物网站(22) 挪威购物网站(7) 印尼购物网站(37) 阿根廷购物网站(9) 意大利购物网站(128) 台湾购物网站(77) 法国购物网站(144) 比利时购物网站(33) 澳大利亚购物网站(309)
You might like
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
CURL状态码列表(详细)
2013/06/27 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
详解JSON1：使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
ES6新特性一： let和const命令详解
2017/04/20 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
Python列表推导式的使用方法
2013/11/21 Python
python如何实现int函数的方法示例
2018/02/19 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
JACK & JONES英国官方网站：欧洲领先的男装生产商
2017/09/27 全球购物
联想台湾官网：Lenovo TW
2018/05/09 全球购物
英国女性时尚精品店：THE DRESSING ROOM
2018/05/23 全球购物
Shopbop中文官网：美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
物理研修随笔感言
2014/02/14 职场文书
检讨书范文大全
2015/05/07 职场文书
安全生产学习心得体会
2016/01/18 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
pandas进行数据输入和输出的方法详解
2022/03/23 Python