原文链接：http://www.th7.cn/web/js/201509/121055.shtml
参考链接：http://www.jb51.net/article/102568.htm
写两个表格，一个为表头，另一个为表内容。当表内容数据量比较大时，可以直接在表内容所在的父容器进行滚动。以下为demo代码实现：
<table> <thead class="header"> <tr><th>姓名</th><th>爱好</th> </tr> </thead></table><div id='scrollContainer' style="height:300px;overflow-y:auto;" ><table class="table" cellspacing=0 cellpadding=0 id="mytable"><tbody><tr> <td>一介码妞</td><td>吉他</td></tr></tbody></table></div><!-- 以下的js只是为了批量生成数据，真正固定表头的方法是fixTabHeader --><script type="text/javascript">$(document).ready(function(){ var row=$("#mytable >tbody>tr:first"); for(i=0;i<80;i++){$('table#mytable > tbody').append(row.clone()); } $("#mytable").fixedHeader(); });</script><script type="text/javascript">function fixTabHeaderScroll(tabid){ var $parent,$head,pTop,oTop,headTop,o;o=$("#"+tabid);oTop=o.height();$parent=o.parent();pTop=$parent.height();$head=$parent.prev();if (pTop <=oTop) {$head.css({$head.outerWidth(true)-scrollBarWidth+"px"});}else{$head.css({100+"%"});}}</script>- 分析
这种方式应该是最简单，最明了的实现方式，表头和表内容分家，各管各家，对于表头来说，不管表内容滚或者不滚，它都在哪里不离不弃。但是存在一个问题，在表内容没有滚动时，表头和表身是垂直对齐的，一旦表身出现滚动，新出现的滚动条会占用表身的部分宽度，这就导致表身和表头又不对齐。所以，我们需要在给两个表格应用同样样式的基础上，再用js函数控制两个的宽度，使他们宽度一致，大体思路是获取滚动条的宽，然后设置表头的宽度减去滚动条的宽度。
补充介绍Jquery的几个参数：
offsetWidth ：当前对象的的宽度包括滚动条在内
scrollWidth ：当前对象的滚动宽度不包括滚动条在内
在css的盒子模型中，最内部是content，然后是padding、border、margin
width=content
innerWidth = width + padding
outerWidth = innerWidth + border
outerWidth(true) = outerWidth + margin
关于outerWidth属性有一个传入参数可以控制它包不包含外部的margin 为true的话包含，默认不包含。
注意：要想表格相对于某个父容器做数据滚动，则该父容器必须做如下设置：
(1)设置固定高度,不设置高度或者用百分比设置高度，滚动不起作用
(2)设置属性overflow-y:auto
必选项，否则当表格数据过多时，不会产生滚动条，而是自动延长该父容器的高度
(3)设置 position:relative;
若不设置，拷贝得来的表头将相对于其设置该属性为该值的父节点（或间接父节点）定位，如果没有，则相对于body我的代码：
<html> <head> <title>test scrollTop</title> <style type="text/css"> #ttitle{ width:100px; border:1px solid blue; height:27px; } #tcontent{ width:100px; border:1px solid red; height:100px; overflow:auto; } tr{ height:20px; } table{ width:100px; border:1px solid black; } </style> <script type="text/javascript"> </script> </head> <body> <div id="ttitle"> <table> <th>姓名</th> <th>年龄</th> </table> </div> <div id="tcontent"> <table> <tr style="width"> <td>guo</td> <td>21</td> </tr> <tr> <td>guo</td> <td>21</td> </tr> <tr> <td>guo</td> <td>21</td> </tr> <tr> <td>guo</td> <td>21</td> </tr> <tr> <td>guo</td> <td>21</td> </tr> <tr> <td>guo</td> <td>21</td> </tr> <tr> <td>guo</td> <td>21</td> </tr> <tr> <td>guo</td> <td>21</td> </tr> </table> </div> </body> </html>