Html 固定柱不工作-THAD、tbody、tfoot

我找到了一个不错的“固定桌”风格，但还不足以满足我的需求。 我需要的是冻结第二行（标题1.x）和最后一列（标题8.1）。我做了一些更改，从td改为th（在第一列示例之后），但没有起作用。 有什么想法吗

这是我的代码：

。表格滚动{
位置：相对位置；
宽度：100%；
z指数：1；
保证金：自动；
溢出：自动；
高度：350px；
}
.表格滚动表格{
宽度：100%；
最小宽度：1280px；
保证金：自动；
边界塌陷：分离；
边界间距：0；
}
.table wrap{position:relative；}
.table scroll th、.table scroll td{
填充物：5px10px；
边框：1px实心#000；
背景：#fff；
垂直对齐：顶部；
}
.表格滚动条THAD th{
背景：#333；
颜色：#fff；
职位：-网络工具包粘性；
位置：粘性；
排名：0；
}
.table scroll tfoot、.table scroll tfoot th、.table scroll tfoot td{
职位：-网络工具包粘性；
位置：粘性；
底部：0；
背景:#666；
颜色：#fff；
z指数：4；
}
第一个孩子{
职位：-网络工具包粘性；
位置：粘性；
左：0；
z指数：2；
背景：#ccc；
}
thead-th:first-child，tfoot-th:first-child{z-index:5；}

标题1
标题2
标题3
标题4
标题5
标题6
标题7
标题8
标题1.1
标题2.1
标题3.1
标题4.1
标题5.1
标题6.1
标题7.1
标题8.1
固定左
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
固定权利
固定左
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
固定权利
固定左
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
固定权利
固定左
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
固定权利
固定左
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
固定权利
固定左
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
固定权利
固定左
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
固定权利
固定左
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
固定权利
固定左
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
固定权利
固定左
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
固定权利
固定左
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
固定权利
固定左
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
固定权利
页脚1
页脚2
页脚3
页脚4
页脚5
页脚6
页脚7
页脚8

新答案：

TL；博士
以下是Firefox上的工作代码：
以下是Chrome的工作代码：

总结您的问题，据我所知，我假设您希望您的桌子冻结：

第一列（你做到了）

最后一列（尚未完成）

前两行（未按预期工作）

最后一行/页脚（完成）

由于您已经完成了（1）任务，因此（2）基本相同，您只需添加

：为您声明冻结第一列的样式添加最后一个子
选择器，然后再添加一行
右：0，最后一列也将按预期冻结，代码如下：

th:first-child,
th:last-child { // add th:last-child
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  right: 0; // add right: 0;
  z-index: 2;
  background: #ccc;
}

thead th:first-child,
tfoot th:first-child,
thead th:last-child, // add thead th:last-child 
tfoot th:last-child { // add tfoot th:last-child
  z-index: 5;
}

要执行（3）任务，请注意当前
位置：sticky
的Edge和Chrome在
thead
和
tr
元素上不起作用，但可以在
th
元素上使用它


因此，为了让它在Firefox上工作，它更直观，只需冻结
thead
元素，而不是
。表格滚动thead
：


在Chrome上，由于bug的存在，它更为棘手，
.table-scroll thead th {
  background: #333;
  color: #fff;

  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

// become --------------------
.table-scroll thead th {
  background: #333;
  color: #fff;
}
.table-scroll thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;

  z-index: 10; // need this to work correctly
}

.table-scroll thead th {
  background: #333;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

// add this to make the second row work --------------------
.table-scroll tr:nth-child(2) th {
  top: 30px; 
}