JaveScript-解决表格使用滚动条时冻结表头栏问题
解决方法：
//设置表格表头里的th==表格内容里的td function ThEqualTd(thId, tdId) { var tdNum = document.getElementById(tdId).rows[0].cells.length;//获取tdId表格中的第一行的列数 var tdW = "";//清空tdW的宽度 for (i = 0; i < tdNum; i++) { tdW = document.getElementById(tdId).rows[0].cells[i].offsetWidth;//获取tdId表格中的第一行第i列的宽度，定义其等于tdW document.getElementById(thId).rows[0].cells[i].width = tdW;//设置thId表格的第一行第i列的宽度=tdW } }
这里就本人的leonaScroll-1.3.js滚动条插件遇到的上述问题做详细说明
根据滚动条，我们做好布局，如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <meta charset="utf-8" /> 7 <script src="jquery-1.10.2.js"></script> 8 <script src="leonaScroll-min-1.3.js"></script> 9 </head> 10 <body> 11 <style> 12 .table{width:500px; height:400px;border:1px solid #b6ff00; border-radius:10px; } 13 .table table{ line-height:25px;border:1px solid #000000; } 14 .table table td,.table table th{height:25px; text-align:center; } 15 </style> 16 <div class="table"> 17 <table> 18 <tr><th>表头</th><th>表头</th><th>表头</th><th>表头</th><th>表头</th></tr> 19 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 20 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 21 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 22 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 23 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 24 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 25 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 26 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 27 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 28 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 29 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 30 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 31 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 32 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 33 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 34 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 35 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 36 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 37 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 38 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 39 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 40 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 41 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 42 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 43 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 44 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 45 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 46 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 47 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 48 </table> 49 </div> 50 <script> 51 $(".table").LeonaScroll(); 52 </script> 53 </body> 54 </html>
问题：上述代码可以实现表格内容超出.table界定的400px时就，出现滚动条，并可以滚动显示内容，但是却出现一个问题，那就是我们的表头也会随内容一起向上滚动，以至于用户在查看地下内容时无法直观的看见我们的表头，而使表格做不到一目了然。针对这个问题，我做了以下处理：
1、首先将HTML的布局做调整，将表头和内容分别写在不同的table里，如下：
1 <style> 2 .all{width:500px; height:400px;border:1px solid #b6ff00; border-radius:10px; } 3 table td,.table table th{height:25px; text-align:center; } 4 .tableTh{width:100%; height:25px; } 5 .tableTd{width:100%; height:375px;} 6 .tableTd table{ line-height:25px;border:1px solid #000000; } 7 8 </style> 9 10 <div class="all"><!--整体全部（表头+外框）--> 11 12 <table class="tableTh"><tr><th>表头</th><th>表头</th><th>表头</th><th>表头</th><th>表头</th></tr></table><!--表头--> 13 14 <div class="tableTd"><!--外框（内容+滚动条）--> 15 <table><!--内容--> 16 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 17 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 18 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 19 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 20 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 21 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 22 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 23 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 24 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 25 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 26 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 27 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 28 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 29 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 30 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 31 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 32 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 33 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 34 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 35 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 36 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 37 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 38 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 39 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 40 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 41 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 42 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 43 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 44 <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr> 45 </table> 46 </div> 47 </div> 48 <script> 49 $(".tableTd").LeonaScroll(); 50 </script>
2、这样，由于表头与内容分隔，且表头不在滚动文本内容区域内，再滚动时，就会发现表头会一直冻结在表格内容之上。但是正因为分隔到不同的table中，又出现了一个问题，表格的th与td宽度不等。
这里如果你的td是设定死的宽度，那就很好办了，th宽度=td宽度就好了。然后很多时候我们使用表格，他的td是随内容长度大小去自适应变更的，所以这个时候我们就需要下面这段js，使他们实时相等了。
在这里我讲这段封成了一个方法，以便其调用：
1 <script> 2 $(".tableTd").LeonaScroll();//滚动条调用 3 4 ThEqualTd("tabTh", "tabTd");//调用th=td 5 6 //设置表格表头里的th==表格内容里的td 7 function ThEqualTd(thId, tdId) { 8 var tdNum = document.getElementById(tdId).rows[0].cells.length;//获取tdId表格中的第一行的列数 9 var tdW = "";//清空tdW的宽度 10 for (i = 0; i < tdNum; i++) { 11 tdW = document.getElementById(tdId).rows[0].cells[i].offsetWidth;//获取tdId表格中的第一行第i列的宽度，定义其等于tdW 12 document.getElementById(thId).rows[0].cells[i].width = tdW;//设置thId表格的第一行第i列的宽度=tdW 13 } 14 } 15 </script>
3、恩，差不多可以看到效果了，但是，还差最后一步，也是细节，不可忽视哟！那就是我们还应该在考虑到滚动条占的位置，也就是我们的th表头里是没有滚动条的，然而，为了让表格的表头和内容更加协调。我们应该再加一个空的th，给其设置宽度等于滚动条所占的宽度，如下：
<table class="tableTh" id="tabTh"><tr><th>表头</th><th>表头</th><th>表头</th><th>表头</th><th>表头</th><th width="14"></th></tr></table><!--表头-->4、
ok，这下就大功告成了。
作者：leona
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接
