写两个表格，一个为表头，另一个为表内容。当表内容数据量比较大时，可以直接在表内容所在的父容器进行滚动。以下为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>