css 设置冻结表格头,固定/冻结行表头、列表头的做法

本文只讲思路和注意事项。本文的固定行表头、列表头要比某些网站的复杂些，因为他们讲的是一个窗口中只有要滚动的表格，而我们是一个窗口中有很多内容，其他内容区域不动，只有表格滚动，同时表格的表头也固定。

固定行表头

固定行表头相对来说要简单得多。

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;

});

注意

注意单元格宽度、高度应该固定下来，否则容易导致表头和数据表单元格对不上。