html 表格 锁定首行,教你实现首行及首列固定 Table

先秀一下 demo！此款 Table 源码~

表面上，在顶部及左侧悬挂两栏并非难事。但单元格尺寸根据其不确定的内容伸展，且顶部及左侧表头也应随之调整宽高。

Table 天然具备如此属性，我们可将 thead 剥离进行 fixed，但首列每一项分散在每一行，如何整体剥离？显然剥离较棘手，需转变思路。

定义新元素模拟首列并悬挂于左侧，但其单元格如何同步同行单元格高度？利用 js 获取当前行高度并赋值于首列元素，假定表格上千行便需如此操作上千次，过于麻烦...

一个 Table 难搞定，两个何如？我需要它们一模一样：

令 table1 与 table2 共享一套样式、数据便可一模一样(使两者同行同列元素尺寸同步)。将 table1 的 thead 剥离进行 fixed；table2 整体置为 fixed 覆盖于 table1 之上，并将 table2 除首列单元格外的其它元素置为透明。此时首行及首列悬挂完成了，但它们并未随表格主体的滚动而滚动。

动用 js 获取 window 滚动位置，scrollX 即为首行向左偏移距离，scrollY 为首列向上偏移距离：

var curX = 0;

var curY = 0;

$(window).on('scroll', function () {

var scrollX = window.scrollX;

var scrollY = window.scrollY;

// 首行向左偏移 scrollX

Math.abs(curX - scrollX) && $('.table1 .thead').css('left', -scrollX);

// 首列向上偏移 scrollY(table2 仅首列非透明等同于整体偏移)

Math.abs(curY - scrollY) && $('.table2').css('top', -scrollY);

curX = scrollX;

curY = scrollY;

});

讲解完毕！

作者：呆恋小喵