HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
BS架构的企业级应用中，当一个表格列数较多时，用户一个常见的需求就是把前面几个重要的列固定住，这样拖动滚动条时固定的列会方便用户查看数据，用户体验很好。一些重量级的JS组件库也都有这个功能，那么有没有更简单的方法实现这个功能呢？
这个需求常见的解决方案是使用表格拼接的方法，这个方案如果要制作静态的网页，或者功能简单的动态页面，逻辑比较简单，技术上也不复杂，很容易实现，但是如果要做成组件，动态功能较多的话，就需要写大量的冗余代码，难以维护，甚至于一个简单的功能，都需要写很多的代码，比如事件处理等，这个方法就显得比较笨拙，灵活性很差，不是一个好的方案。
经过长时间的分析研究，各种场景的试验，我们找到了一个兼容性非常好的解决方案，总体上来讲采用的是定位计算的方法，下面贴出代码，然后做个解读。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<scripttype="text/javascript">
functiondivScroll(scrollDiv){
varscrollLeft=scrollDiv.scrollLeft;
document.getElementById("tableDiv_title").scrollLeft=scrollLeft;
document.getElementById("tableDiv_body").scrollLeft=scrollLeft;
}
functiondivYScroll(scrollYDiv){
varscrollTop=scrollYDiv.scrollTop;
document.getElementById("tableDiv_y").scrollTop=scrollTop;
}
functiononwheel(event){
varevt=event||window.event;
varbodyDivY=document.getElementById("tableDiv_y");
varscrollDivY=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>
<styletype="text/css">
body{
margin:0;
padding:0;
}
table{
border-collapse:collapse;
border:0;
border:none;
}
tabletd{
border:1pxsolid#000;
overflow:hidden;
padding:02px;
}
</style>
</head>
<body>
<divstyle="width:500px;position:relative;padding-right:18px;">
<divstyle="position:relative;height:368px;overflow:hidden;width:100%">
<divstyle="padding-left:108px;width:auto;overflow:hidden;background:#f00;"id="tableDiv_title">
<tableborder="0"cellspacing="0"cellpadding="0">
<tr>
<tdstyle="min-width:30px;max-width:30px;left:0;top:0;width:30px;overflow:hidden;background-color:#f00;position:absolute;z-index:1;">000</td>
<tdstyle="min-width:74px;max-width:74px;left:30px;top:0;width:74px;overflow:hidden;background-color:#f00;position:absolute;z-index:1;">自动表格</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">最后一列</td>
</tr>
</table>
</div>
<divstyle="overflow:hidden;position:absolute;height:128px;width:100%;"id="tableDiv_y"onmousewheel="onwheel(event);"onwheel="onwheel(event);">
<divstyle="padding-left:108px;width:auto;overflow:hidden;"id="tableDiv_body">
<tableborder="0"cellspacing="0"cellpadding="0">
<tr>
<tdstyle="min-width:30px;max-width:30px;left:0;width:30px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">001</td>
<tdstyle="min-width:74px;max-width:74px;left:30px;width:74px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">最后一列</td>
</tr>
<tr>
<tdstyle="min-width:30px;max-width:30px;left:0;width:30px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">002</td>
<tdstyle="min-width:74px;max-width:74px;left:30px;width:74px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">最后一列</td>
</tr>
<tr>
<tdstyle="min-width:30px;max-width:30px;left:0;width:30px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">003</td>
<tdstyle="min-width:74px;max-width:74px;left:30px;width:74px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">最后一列</td>
</tr>
<tr>
<tdstyle="min-width:30px;max-width:30px;left:0;width:30px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">004</td>
<tdstyle="min-width:74px;max-width:74px;left:30px;width:74px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">最后一列</td>
</tr>
<tr>
<tdstyle="min-width:30px;max-width:30px;left:0;width:30px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">005</td>
<tdstyle="min-width:74px;max-width:74px;left:30px;width:74px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">最后一列</td>
</tr>
<tr>
<tdstyle="min-width:30px;max-width:30px;left:0;width:30px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">006</td>
<tdstyle="min-width:74px;max-width:74px;left:30px;width:74px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">最后一列</td>
</tr>
<tr>
<tdstyle="min-width:30px;max-width:30px;left:0;width:30px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">007</td>
<tdstyle="min-width:74px;max-width:74px;left:30px;width:74px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">最后一列</td>
</tr>
<tr>
<tdstyle="min-width:30px;max-width:30px;left:0;width:30px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">008</td>
<tdstyle="min-width:74px;max-width:74px;left:30px;width:74px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">最后一列</td>
</tr>
<tr>
<tdstyle="min-width:30px;max-width:30px;left:0;width:30px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">009</td>
<tdstyle="min-width:74px;max-width:74px;left:30px;width:74px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">最后一列</td>
</tr>
<tr>
<tdstyle="min-width:30px;max-width:30px;left:0;width:30px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">010</td>
<tdstyle="min-width:74px;max-width:74px;left:30px;width:74px;overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">56454自动</td>
<tdstyle="min-width:100px;max-width:100px;width:100px;">最后一列</td>
</tr>
</table>
</div>
</div>
<divstyle="background-color:#eee;overflow:hidden;top:150px;width:100%;z-index:2;position:absolute;">
<divstyle="margin-left:108px;width:auto;overflow-x:scroll;overflow-y:hidden;"onscroll='divScroll(this);'>
<divstyle="width:630px;height:1px;"></div>
</div>
</div>
</div>
<divid="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);'>
<divstyle="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控制代码非常干净，维护容易。缺点就是计算过多。我们认为该方案比较适用于开发组件的情况，静态页面就有点小题大作了。
以上所述就是本文的全部内容了，希望大家能够喜欢。