HTML+CSS+JS实现TABLE固定列（常见浏览器兼容）的最佳实践_html/css_WEB-I

BS架构的企业级应用中，当一个表格列数较多时，用户一个常见的需求就是把前面几个重要的列固定住，这样拖动滚动条时固定的列会方便用户查看数据，用户体验很好。一些重量级的JS组件库也都有这个功能，那么有没有更简单的方法实现这个功能呢？

这个需求常见的解决方案是使用表格拼接的方法，这个方案如果要制作静态的网页，或者功能简单的动态页面，逻辑比较简单，技术上也不复杂，很容易实现，但是如果要做成组件，动态功能较多的话，就需要写大量的冗余代码，难以维护，甚至于一个简单的功能，都需要些很多的代码，比如事件处理等，这个方法就显得比较笨拙，灵活性很差，不是一个好的方案。

经过长时间的分析研究，各种场景的试验，我们找到了一个兼容性非常好的解决方案，总体上来讲采用的是定位计算的方法，下面贴出代码，然后做个解读。

     无标题文档  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;        }    }}  body {margin:0;padding:0;}table {border-collapse:collapse;border:0;border:none;}table td  {border:1px solid #000;overflow:hidden;padding:0 2px;}   
   
    
                     000          自动表格          56454自动          56454自动          56454自动          56454自动          56454自动          最后一列

      
查看更多关于HTML+CSS+JS实现TABLE固定列（常见浏览器兼容）的最佳实践_html/css_WEB-I的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did113477