关于固定表头的一种方式

关于固定表头的一种方式

对于固定表头可以通过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>

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