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>
新闻热点
疑难解答
图片精选
