Html 更改某些列粘滞时，行标题粘滞不起作用

在上一张桌子的行中，headsticky工作得很好。然后我对第一列和第二列做了一些修改。然后排头粘后就不起作用了。我找不到哪里错了。我在下面添加了我的代码

CSS-->

表-->

---

如果你能给我一个解决方案，这将是一个巨大的帮助。谢谢。

您需要增加粘性左侧元素的

z-index

。由于您将所有元素都设置为粘性，因此后一个元素将与前一个元素重叠：

.view{
保证金：自动；
宽度：100%；
}
.包装纸{
位置：相对位置；
溢出：自动；
空白：nowrap；
高度：100px；
}
.粘水柱{
位置：粘性；
职位：-网络工具包粘性；
背景色：白色；
}
第一上校{
宽度：100px；
最小宽度：100px；
最大宽度：100%；
左：0px；
}
第二上校{
宽度：150px；
最小宽度：150px；
最大宽度：100%；
左：100px；
}
th{
背景：白色；
位置：粘性；
排名：0；
}
th.sticky-col{
z指数：1；
}

产品
描述
洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图
洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图
圣骑士
圣骑士
Lorem ipsum dolor sit amet，是一位杰出的献身者。Aliquam fringilla metus lorem是一位临时拍卖人，他是一位直径较大的苏打水拍卖商，他是一位普尔文纳拍卖行的律师，他是一位律师。Donec ac leo blandit，facilisis purus non，fringilla velit。暂时性性爱
Lorem ipsum dolor sit amet，是一位杰出的献身者。Aliquam fringilla metus lorem是一位临时拍卖人，他是一位直径较大的苏打水拍卖商，他是一位普尔文纳拍卖行的律师，他是一位律师。Donec ac leo blandit，facilisis purus non，fringilla velit。暂时性性爱
圣骑士
圣骑士
Lorem ipsum dolor sit amet，是一位杰出的献身者。Aliquam fringilla metus lorem是一位临时拍卖人，他是一位直径较大的苏打水拍卖商，他是一位普尔文纳拍卖行的律师，他是一位律师。Donec ac leo blandit，facilisis purus non，fringilla velit。暂时性性爱
Lorem ipsum dolor sit amet，是一位杰出的献身者。Aliquam fringilla metus lorem是一位临时拍卖人，他是一位直径较大的苏打水拍卖商，他是一位普尔文纳拍卖行的律师，他是一位律师。Donec ac leo blandit，facilisis purus non，fringilla velit。暂时性性爱
圣骑士
圣骑士
Lorem ipsum dolor sit amet，是一位杰出的献身者。Aliquam fringilla metus lorem是一位临时拍卖人，他是一位直径较大的苏打水拍卖商，他是一位普尔文纳拍卖行的律师，他是一位律师。Donec ac leo blandit，facilisis purus non，fringilla velit。暂时性性爱
Lorem ipsum dolor sit amet，是一位杰出的献身者。Aliquam fringilla metus lorem是一位临时拍卖人，他是一位直径较大的苏打水拍卖商，他是一位普尔文纳拍卖行的律师，他是一位律师。Donec ac leo blandit，facilisis purus non，fringilla velit。暂时性性爱
圣骑士
圣骑士
Lorem ipsum dolor sit amet，是一位杰出的献身者。Aliquam fringilla metus lorem是一位临时拍卖人，他是一位直径较大的苏打水拍卖商，他是一位普尔文纳拍卖行的律师，他是一位律师。Donec ac leo blandit，facilisis purus non，fringilla velit。暂时性性爱
Lorem ipsum dolor sit amet，是一位杰出的献身者。Aliquam fringilla metus lorem是一位临时拍卖人，他是一位直径较大的苏打水拍卖商，他是一位普尔文纳拍卖行的律师，他是一位律师。Donec ac leo blandit，facilisis purus non，fringilla velit。暂时性性爱

此处键入

左：0px；如果我纠正了它的话。但代码不起作用。这是在我输入问题时发生的。很抱歉出错。但行标题粘滞不起作用。我用您的答案编辑问题。行标题粘滞在执行前两列之前效果良好。@gt\u nexus working and not working（工作与不工作）并没有真正的帮助，您需要定义什么在工作，什么不在工作（它实际如何工作以及您期望它如何工作）.我的期望是，当水平滚动时，前两列不应滚动。它现在运转良好。现在的问题是当我垂直滚动行标题时没有粘性。我想在垂直滚动时粘贴行标题。您添加了
height:100px。然后它工作得很好。但在你添加高度后：100px该表仅显示了几列。当我将其更改为<代码>高度：100%列很好地在页面中流动，但行粘性不起作用。有什么问题吗？
.view {
  margin: auto;
  width: 100%;
}

.wrapper {
  position: relative;
  overflow: auto;
  white-space: nowrap;
}

.sticky-col {
  position: sticky;
  position: -webkit-sticky;    
  background-color: white;
  z-index:1;
}

.first-col {
  width: 100px;
  min-width: 100px;
  max-width: 100%;
  left: 0px;
}

.second-col {
  width: 150px;
  min-width: 150px;
  max-width: 100%;
  left: 100px;   
}

th {
  background: white;
  position: sticky;
  top: 0;
}

<div class="view">
<div class="wrapper"> 
  <table>
    <thead>
      <tr>
        <th class="sticky-col first-col">Col 1</th>
        <th class="sticky-col second-col">Col 2</th>
        <th>...</th>
        <th>...</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sticky-col first-col"></td>
        <td class="sticky-col second-col"></td>
        <td>...</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

th {
  background: white;
  position: sticky;
  top: 0;
}