Html 固定第一列和第一行的可滚动表格

我正在尝试创建第一列和第一行固定的可滚动HTML表。列已固定，但我找不到固定行的方法。有没有办法做到这一点

现场：

.wrapper{
左侧边缘：5em；
溢出-x：自动；
宽度：200px；
}
th:第一个孩子，td:第一个孩子{
左：0；
位置：绝对位置；
宽度：5em；
}
th,td p{
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
td p{
边际上限：0；
}
运输署署长：最后一名儿童{
页边距底部：0；
}
th，td{
边框底部：1px红色虚线；
}

第1列aaa
第2栏bbb bbb bbb
第3栏ccc
第1列aaa

第2栏bbb bbb bbb
第2栏bbb bbb bbb

第3栏ccc

第1列aaa

第2栏bbb bbb bbb

第3栏ccc

第1列aaa

第2栏bbb bbb bbb

第3栏ccc

第1列aaa

第2栏bbb bbb bbb

第3栏ccc

第1列aaa

第2栏bbb bbb bbb

第3栏ccc

遇到问题的主要原因是

位置：绝对
规则，这意味着定义后一个规则的元素从文档流中删除，并导致列收缩到其内容的大小（您提到的
边框未放置在所需的位置）

position
属性有另一个强大的值，称为
sticky
（从它的名称可以猜出它能做什么！），当视口滚动到某个位置时，它会固定在它的位置上

因此，不是：

th:first-child, td:first-child {
    left: 0;
    position: absolute;
    width: 5em;
}

使用：

对于要固定的第一行，在
thead>th
元素上使用
sticky
和
top:0
：

thead th {
  position: sticky;
  top: 0;
}

下一个演示中的
div.wrapper
被最小化（大小），以便我们确保有一些垂直/水平滚动


.wrapper{
左侧边缘：5em；
溢出-x：自动；
宽度：300px；
高度：100px；/**为了演示目的，需要一些滚动**/
}
tr th：第一个孩子，
tr td：第一个孩子{
位置：粘滞；/**粘滞而非绝对**/
左：0；
宽度：5em；
背景色：#00f；/**用于演示**/
z-index:2；/**以便在具有水平滚动时，左侧的列保持在其他列的顶部**/
}
thead th{
位置：粘性；/**针用于ST行**/
排名：0；
背景色：#f00；/**用于演示**/
}
th，
td p{
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
td p{
边际上限：0；
}
运输署署长：最后一名儿童{
页边距底部：0；
}
th，
运输署{
边框底部：1px红色虚线；
}

第1列aaa
第2栏bbb bbb bbb
第3栏ccc
第1列aaa

第2栏bbb bbb bbb

第2栏bbb bbb bbb

第3栏ccc

第1列aaa

第2栏bbb bbb bbb

第3栏ccc

第1列aaa

第2栏bbb bbb bbb

第3栏ccc

第1列aaa

第2栏bbb bbb bbb

第3栏ccc

第1列aaa

第2栏bbb bbb bbb

第3栏ccc

第1列aaa

第2栏bbb bbb bbb

第3栏ccc

第1列aaa

第2栏bbb bbb bbb

第3栏ccc

第1列aaa

第2栏bbb bbb bbb

第3栏ccc

我不明白为什么要将编辑滚动到旧版本？SO的自动代码片段允许我们重现问题中描述的问题。我不喜欢格式。然而，我同意片段是有用的。因此，我自己创建了代码段。格式化是由SO的代码段（左侧的
tidy
按钮）自动完成的，而不是我个人的偏好。不管怎样，让我们回到问题上来，你说过你希望第一行被固定，这意味着当你向下滚动时，它会保持在顶部？我说得对。是的，没错，就像这里：。太好了，我正在努力，我会尽快发布答案。非常感谢，萨贝特。我似乎稍微改进了垂直卷轴：@johnc.j。不客气！很高兴我设法提供了一些帮助，保持了良好的工作，并有一个愉快的一天。
thead th {
  position: sticky;
  top: 0;
}