写两个表格，一个为表头，另一个为表内容。当表内容数据量比较大时，可以直接在表内容所在的父容器进行滚动。以下为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({width:$head.outerWidth(true)-scrollBarWidth+"px"});}else{$head.css({width: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>