关于固定表头的一种方式

关于固定表头的一种方式

 对于固定表头可以通过CSS的固定定位来实现

position: fixed;

但是一旦表头被固定定位修饰之后会带来两个问题：
    1.表体不依据表头定位，而是通过上一层div进行定位，导致表体中前面的部分数据会被表头遮挡。
    2.表头的长度不受标准文档流约束，导致表头与表体的单元格不对齐。

解决问题1：
        我们可以通过在表体上方添加一个与表头高度相等的一行，来将表体挤下来。而表头将这新添加的一行覆
   盖 ，达到固定表头的效果。
解决问题2：
        我们可以获取表体每一个单元格的长度，通过js来修改表头单元格的长度。来达到表头与表体单元格对其
    的效果。

css：

<style>
    thead {
        /* 固定表头 */
        position: fixed;
        /* 使表头部分高于表体  */
        z-index: 2;
    }
    /* 空白行,用于填充表头脱离文档流之后的区域 */
    #spacetr {
        position: relative;
        z-index: 1;
    }
    tbody {
        position: relative;
        z-index: 1;
    }
</style>

js：

$(function(){
        $("#spacetr").css("height", $("thead").css("height"));
        $("#thNumber").css("width", $("#tdNumber").css("width"));
        $("#thUserValue").css("width", $("#tdUserValue").css("width"));
        $("#thTime").css("width", $("#tdTime").css("width"));
        $("#thEnergy").css("width", $("#tdEnergy").css("width"));
    });

jsp：

<table>
    <thead>
        <tr>
            <td id="thNumber">序号</td>
            <td id="thUserValue">姓名</td>
            <td id="thTime">日期</td>
            <td id="thEnergy">金额</td>
        </tr>
    </thead>
    <tr id="spacetr">
        <td id="tdNumber"></td>
        <td id="tdUserValue"></td>
        <td id="tdTime"></td>
        <td id="tdEnergy"></td>
    </tr>
    <tbody>
        <tr>
            <td>.....</td>
            <td>.....</td>
            <td>.....</td>
            <td>.....</td>
        </tr>
    </tbody>
</table>

这样就可以实现表头固定的需求了，如果大神们有更好的实现方式，可以指点一哈。