欢迎使用CSDN-markdown编辑器

转自：http://www.cnblogs.com/ariter/p/5970298.html
js简单固定table表头及css问题分析。
复制代码


Test02


(document).ready(function () {("#tabhead").css("width", ("#MyTable").css("width"));("#tabdiv").scroll(function () { // 滚动条移动事件
var yheight = ("#tabdiv").scrollTop(); // 滚动条距顶端的距离("#tabhead").css("top", yheight + "px");
});
});


复制代码
复制代码

课程 总分 总分排名 平均分 平均分排名 数学
百分制 语文
等级制 — — — — — — — —

</div>

复制代码
只用几行js，加几个css样式。不用贴层或改动表结构。（测试时请多加几行tr）

结果如图：上下滚动，thead不动；左右滚动，thead跟随移动

分析：

将thead 设为absolute定位，使之脱离文档流，再获取垂直滚动条距离顶部的滚动距离，作为thead 的top位置，并实时同步。

问题一：thead 脱离文档流后，超出tabdiv不会隐藏，且tbody上部会被遮挡。

解决：1，将tabdiv设为relative或absolute定位；2，为table加上上边距来抵消thead的高度，margin-top:50px;。

问题二：table超出div宽度后，tbody单元格会自动被压缩。

解决：table 样式加上table-layout: fixed; width: 100%;

并通过元素来设置每列宽度。

问题三：thead超出div宽度后，thead单元格会自动被压缩，而tbody正常显示。

解决：js中直接将thead的宽度设为table的宽度，("#tabhead").css("width",(“#MyTable”).css(“width”));