本文只讲思路和注意事项。本文的固定行表头、列表头要比某些网站的复杂些,因为他们讲的是一个窗口中只有要滚动的表格,而我们是一个窗口中有很多内容,其他内容区域不动,只有表格滚动,同时表格的表头也固定。
固定行表头
固定行表头相对来说要简单得多。
1、将表格放一个 div 中,为这个表格设置高度(如果想做随窗口而变化的自动高度,就用 position:absolute; bottom:xxxpx;……)。为这个表格设置 overflow-y:scroll。现在滚动的表格就出来了。
2、另起一个 table,和上面的 div 平级,table 仅含有表头。利用 CSS 将这个 table 和第 1 步的表格表头重叠。
3、完成了,但是还是有两个缺点,一是第 2 步的表格没有考虑第 1 步的滚动条占用的空间,二是窗口宽度变化时且 table 宽度是用的百分比就需要动态调整宽度,做法如下:// 固定表头
$(".fixedRowContainer").width($(".dataTable").get(0).clientWidth);
$(window).resize(function () {
// 固定表头的尺寸随窗口变化而变化
$(".fixedRowContainer").width($(".dataTable").get(0).clientWidth);
});
固定行、列表头
这个要复杂些,因为行列表头还要随数据表的滚动条滚动而滚动。
除了固定行表头那种思路外,额外增加两个思路:
1、增加一个左上角的表头,它是固定不动的,也就是行表头和列表头的公共部分。
2、使行表头随数据表横向滚动而滚动,列表头随数据表纵向滚动而滚动,代码如下:// 表头联动
$(".dataTableContainer").scroll(function () {
var that = $(this);
// 行表头联动
$(".fixedRowContainer").get(0).scrollLeft = that.get(0).scrollLeft;
// 列表头联动
$(".fixedColumnContainer").get(0).scrollTop = that.get(0).scrollTop;
});
注意
注意单元格宽度、高度应该固定下来,否则容易导致表头和数据表单元格对不上。