实现表格表头固定，横纵向滚动正常
前几天，部门的老大叫我解决项目的两个历史遗留功能点，其中一个就是要实现表头固定，横纵向滚动无影响
实现点：建立一个表格，滚动的时候表头始终显示在可视区域的上方，横向滚动时正常
难点1--要让表格在纵向滚动的时候不随滚动条滚动
难点2--要让表格在横向滚动的时候正常滚动
只是难点1的话其实有很多个解决方案，这里暂列两个，第2个可解决难点1和难点2
第一个解决方案，使用两个table，表头单独做一个table，内容做一个，这里因为
滚动条的原因会让table的宽度变窄造成偏移，我这里使用js去监控调整，下面直接附代码段：(为了显示方便，内嵌CSS样式)
遇到的问题：难点二，表头无法同步横向滚动，这里应该可以用js去控制，我选择的是第二种方案暂时不处理
js：
<script>
var scrollbarWidth = $('#table-maxHeight')[0].offsetWidth - $('#table-maxHeight')[0].scrollWidth;
$("#table-th").css("paddingRight",scrollbarWidth);
</script>
html：
<table id="table-th"> <tr> <th style="width:200px">表头1</th> <th style="width:200px">表头2</th> <th style="width:200px">表头3</th> <th style="width:200px">表头4</th> <th style="width:200px">表头5</th> <th style="width:200px">表头6</th> <th style="width:200px">表头7</th> <th style="width:200px">表头8</th> </tr> </table> <div style="height:200px;overflow-y:auto" id="table-maxHeight"> <table style="text-align:center;line-height:3em"> <tr> <td style="width:200px">内容1</th> <td style="width:200px">内容2</th> <td style="width:200px">内容3</th> <td style="width:200px">内容4</th> <td style="width:200px">内容5</th> <td style="width:200px">内容6</th> <td style="width:200px">内容7</th> <td style="width:200px">内容8</th> </tr> <tr> <td style="width:200px">内容1</th> <td style="width:200px">内容2</th> <td style="width:200px">内容3</th> <td style="width:200px">内容4</th> <td style="width:200px">内容5</th> <td style="width:200px">内容6</th> <td style="width:200px">内容7</th> <td style="width:200px">内容8</th> </tr> <tr> <td style="width:200px">内容1</th> <td style="width:200px">内容2</th> <td style="width:200px">内容3</th> <td style="width:200px">内容4</th> <td style="width:200px">内容5</th> <td style="width:200px">内容6</th> <td style="width:200px">内容7</th> <td style="width:200px">内容8</th> </tr> <tr> <td style="width:200px">内容1</th> <td style="width:200px">内容2</th> <td style="width:200px">内容3</th> <td style="width:200px">内容4</th> <td style="width:200px">内容5</th> <td style="width:200px">内容6</th> <td style="width:200px">内容7</th> <td style="width:200px">内容8</th> </tr> <tr> <td style="width:200px">内容1</th> <td style="width:200px">内容2</th> <td style="width:200px">内容3</th> <td style="width:200px">内容4</th> <td style="width:200px">内容5</th> <td style="width:200px">内容6</th> <td style="width:200px">内容7</th> <td style="width:200px">内容8</th> </tr> </table> </div>
第二个解决方案（实现），表头部用绝对定位脱离table文档流，监听目标滚动事件，滚动时将scroolTop的值赋给表头的top属性即可实现
遇到问题：单元格的内容在表头脱离文档流后自动根据内容多少设置宽度造成与表头不对齐，设置的width无效
解决方案：通过在单元格中插入div设置与表头一样的宽度从而将td撑起来，*展示案例没有写入
style：
<style type="text/css"> #scrool{width:1000px;height:300px;margin:auto;overflow:auto;position:relative} .position_th{background-color:gray;position:absolute;top:0} table{width:2000px;} td{width:200px;height:30px;} tr{width:2000px} </style>
js：
<script> $(document).ready(function(){ $("div").scroll(function() { $(".position_th").css({"top":$(this).scrollTop()}) }); }); </script>
html：
<div id="scrool"> <table class="position_table" cellpadding="0" cellspacing="0"> <tr class="position_th"> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> <td>006</td> <td>007</td> <td>008</td> <td>009</td> <td>0010</td> </tr> <tr> <td>内容1</td> <td>内容1</td> <td>内容1</td> <td>内容1</td> <td>内容1</td> <td>内容1</td> <td>内容1</td> <td>内容1</td> <td>内容1</td> <td>内容1</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> </table> </div>
不对之处请指正
个人原创，转载请注明来源
博客：http://www.cnblogs.com/alex-web/
注：小疯纸的yy
