Javascript 如何创建html<；表>；具有固定标题**和**的固定列，主要使用CSS

为了有一个固定的表头，我真的很幸运在scroll上应用了css转换。但是现在我想在水平滚动以固定列时尝试同样的技术

我遇到的问题是，当水平滚动时，标题中的固定列显示在后面而不是顶部。浏览器决定在进行转换后哪些DOM元素应该位于顶部。我能做些什么来控制这一切？（是的，我试过z-index）

演示

（函数（）{
var app=angular.module（“soDemo”，[]）；
应用控制器（“soDemoController”，soDemoController）；
SoDemoController.$inject=['$scope'，'$document']；
功能控制器（$scope，$document）{
var vm={
数据：[0,1,2,3,4,5,6,7,8,9]
};
$scope.vm=vm；
$（'table container'）。on（'scroll'，onScroll）；
返回；
///////////实施////////
函数onScroll（）{
var translate=“translate（0，+this.scrollTop+“px）”；
$（“表thead-th:not（.pinted）”）.css（'transform'，translate）；
translate=“translate（“+this.scrollLeft+”px，0）”；
$（“table tbody.pinted”）.css（'transform'，translate）；
translate=“translate（“+this.scrollLeft+”px，“+this.scrollTop+”px）”；
$（“table thead th.pinted”）.css（'transform'，translate）；
}
}
})();
.table容器{
溢出：自动；
高度：200px；
宽度：300px
}
桌子{
表布局：固定；
边界间距：0；
}
运输署{
填充：3倍；
空白：nowrap；
右边框：1px实心#ccc；
}
th{
背景：#999；
}
钉住{
背景：#ccc；
}
td{
背景：#eee；
}
输入{
边缘顶部：20px；
}

水平滚动时，标题行在col0和col1的顶部滚动，而不是在其后面滚动

垂直滚动时，tbody单元格将在第0列和第1列标题上方而不是后面渲染

第0列
第1列
第2列
第3列
第4列
第5列
第6栏
第7栏
第8栏
第9栏
数据{{item}
数据{{item}
数据{{item}
数据{{item}
数据{{item}
数据{{item}
数据{{item}
数据{{item}
数据{{item}
数据{{item}
我认为这仍然是一个z指数问题

多亏了@sascha10000，他们让我想起了丢失的东西。如果您将
position:relative
添加到css中的
th.pinted
类中，并且还添加了一个正的
z-index
。（即
z-index:20
）它似乎起作用


（函数（）{
var app=angular.module（“soDemo”，[]）；
应用控制器（“soDemoController”，soDemoController）；
SoDemoController.$inject=['$scope'，'$document']；
功能控制器（$scope，$document）{
var vm={
数据：[0,1,2,3,4,5,6,7,8,9]
};
$scope.vm=vm；
$（'table container'）。on（'scroll'，onScroll）；
返回；
///////////实施////////
函数onScroll（）{
var translate=“translate（0，+this.scrollTop+“px）”；
$（“表thead-th:not（.pinted）”）.css（'transform'，translate）；
translate=“translate（“+this.scrollLeft+”px，0）”；
$（“table tbody.pinted”）.css（'transform'，translate）；
translate=“translate（“+this.scrollLeft+”px，“+this.scrollTop+”px）”；
$（“table thead th.pinted”）.css（'transform'，translate）；
}
}
})();
.table容器{
溢出：自动；
高度：200px；
宽度：300px
}
桌子{
表布局：固定；
边框宽度：0；
边界间距：0；
}
运输署{
填充：3倍；
空白：nowrap；
右边框：1px实心#ccc；
}
th{
背景：#999；
}
钉住{
位置：相对；/******这是
表
工作的本质。您可以模拟
表
来实现此功能，但据我所知，您不能使用
表
，因为
表
往往会忽略z索引值。
是否签出
位置：粘性
？我相当肯定这是一个例子这正是您要查找的。您需要在行/列上设置一个z索引，以使其高于其他行/列

在代码段中，它可以按照您的要求工作…？标题行位于列标题的前面。或者您的意思是相反的？也许z-index仍然是一个选项：我有一个非常类似的问题，我用z-index和定位欺骗了它。在您发表评论时，我完全搞砸了演示（tbody中的固定单元格应该垂直滚动，而不是水平滚动，这与您通常看到的固定列类似）很抱歉，当时我在家里处理多个任务。我已经清理了它以显示问题，您的评论导致另一个用户给出答案。非常感谢。您链接的z-index文章非常好。现在更有意义了。堆叠上下文…可能与我已经审阅的文章重复，所以解决方案不太干净在我看来，我并不认为这是一个整体的想法，因为我在做固定标题的固定列时采用了相同的方法：。我只是将他的想法扩展到固定列。在这方面仍然非常不受支持。但感谢您提供的信息。这太棒了！我将阅读@sascha10000 tonite的z-index文章。我为此奋斗了好几年这是我遇到的唯一一个CSS解决方案，它有一个固定的标题和固定的列。我想很多人都会对这个优雅的解决方案感兴趣。正因为如此，我清理了我的演示代码以更好地显示错误。如果你将它复制到然后再重新应用你的修复，这是一个更好的dem