Javascript CSS-多行的粘性定位

我试图在滚动表格时锁定一定数量的要“固定”的行。问题：
1） 要锁定的行数各不相同（不总是仅列标题），因此不能依赖固定的行数。
2） 每行的高度可能因内容而异，因此它的高度不相等，也没有任何已知值。
3） 由于表和内容是动态创建的，并且可以在运行时修改，因此响应性解决方案将是最好的解决方案。

给定以下CSS（假设AD中的所有行都被“锁定”）：

然后是JavaScript方法（tbl是表元素）：

var i，j，h=0，r；//设置下一个“锁定”行的“顶部”
对于（i=0；i有一个非常简单的解决方案，使AD粘性，而不是单个行


.container{
高度：250px；
宽度：200px；
溢出：自动；
}
th{
高度：60px；
}
#第二{
高度：80px；
背景颜色：浅蓝色；
}
泰德{
位置：粘性；
顶部：0px；
}

h第1行
h第2排
数据
数据
数据
数据
数据
数据
数据
数据
l数据
根据以下链接：-此解决方案可能在Chrome上不起作用。如果我想通过编程检测它是否起作用（实现回退），我相信这会有点困难…但是，在FF/Safari上，它起作用，经过测试。你是对的，它在Chrome上坏了，看起来他们不会修复它。祝你好运！
thead th{ position:sticky; }

var i,j,h=0,r; // Set the "top" of next "locked" rows
for(i=0 ; i<tbl.thead.rows.length ; i++) {
    r=tbl.thead.rows[i];
    for(j=0 ; j<r.cells.length ; j++)
        r.cells[j].style.top=h+"px";
    h+=r.offsetHeight;
}

var rules="",i,h=0; // Set the "top" of next "locked" rows
for(i=0 ; i<tbl.thead.rows.length ; i++) {
    rules+="thead tr:nth-child("+(i+1)+") th{ top:"+h+"px; }\n";
    h+=tbl.thead.rows[i].offsetHeight;
}
/*
I know is possible to use stl.sheet.insertRule(),
but as I overwrite ALL rules whenever there is change, I have chosen this way.
*/
stl.innerHTML=rules;