首页
所有分类
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 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
js实现QQ面板拖拽效果（慕课网DOM事件探秘）（全）
Sep 19 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
JS实现按比例缩小图片宽高
Aug 24 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
scss(1) vue-cli3.x(1) 项目打包(2) KVM(1) watch(1) Jmerte(1) Yolov5(1) vue-router-link(1) TimePickerView(1) 监听(2)
You might like
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
基于mysql的论坛（3）
2006/10/09 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
跟老齐学Python之类的细节
2014/10/13 Python
Python使用django获取用户IP地址的方法
2015/05/11 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
Python爬虫开发与项目实战
2020/12/16 Python
Why we need EJB
2016/10/20 面试题
农民入党思想汇报
2014/01/03 职场文书
团日活动总结
2014/04/28 职场文书
学习礼仪心得体会
2014/09/01 职场文书
财务工作检讨书
2014/10/29 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
公司员工辞职信范文
2015/05/12 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android