table表头行固定

  /* 
        * 功能：固定表头 
        * 参数   viewid     表格的id 
        *       scrollid   滚动条所在容器的id 
        *       size       表头的行数（复杂表头可能不止一行） 
        */
        function scroll(viewid, scrollid, size) {
            // 获取滚动条容器 
            var scroll = document.getElementById(scrollid);
            // 将表格拷贝一份 
            var tb2 = document.getElementById(viewid).cloneNode(true);
            // 获取表格的行数 
            var len = tb2.rows.length;
            // 将拷贝得到的表格中非表头行删除 
            for (var i = tb2.rows.length; i > size; i--) {
                // 每次删除数据行的第一行 
                tb2.deleteRow(size);
            }
            // 创建一个div 
            var bak = document.createElement("div");
            // 将div添加到滚动条容器中 
            scroll.appendChild(bak);
            // 将拷贝得到的表格在删除数据行后添加到创建的div中 
            bak.appendChild(tb2);
            // 设置创建的div的position属性为absolute，即绝对定于滚动条容器（滚动条容器的position属性必须为relative） 
            bak.style.position = "absolute";
            // 设置创建的div的背景色与原表头的背景色相同（貌似不是必须） 
            bak.style.backgroundColor = "#dce7fb";
            // 设置div的display属性为block，即显示div（貌似也不是必须，但如果你不希望总是显示拷贝得来的表头，这个属性还是有用处的） 
            bak.style.display = "block";
            // 设置创建的div的left属性为0，即该div与滚动条容器紧贴 
            bak.style.left = 0;
            // 设置div的top属性为0，初期时滚动条位置为0，此属性与left属性协作达到遮盖原表头 
            bak.style.top = "0px";
            // 给滚动条容器绑定滚动条滚动事件，在滚动条滚动事件发生时，调整拷贝得来的表头的top值，保持其在可视范围内，且在滚动条容器的顶端 
            scroll.onscroll = function () {
                // 设置div的top值为滚动条距离滚动条容器顶部的距离值 
                bak.style.top = this.scrollTop + "px";
            }
        }

        // 在页面加载完成后调用该方法
        $(document).ready(
         function () {
             scroll("tab", "elDiv", 4);
         });

添加样式：

   #elDiv
        {
            height: 425px;
            overflow-y: auto;
            position: relative;
        }
        #tab, tr, td, th
        {
            border: 1px solid #ccd;
            border-collapse: collapse;
        }
        #tab
        {
            width: 100%;
        }
        #tab td
        {
            text-align: center;
            height: 24px;
            width: 50px; /** 固定单元格宽度，防止分离表头后，表头与数据行错位（缺点） */
            line-height: 24px;
            padding: 3px 5px;
            word-break: break-all; /** 设置当文本过长时换行 */
        }
        #tab th
        {
            width: 50px;
            height: 24px; /** 不管是固定像素或是百分比，应与对应数据列的宽度一致 */
            line-height: 24px;
        }

Html：

    <div id="elDiv">
            <table id="tab">
                <tr><td>头</td></tr>也可以是多行

                <tr><td>内容</td></tr>

            </table>
        </div>