Javascript 在<；td>；和科尔斯潘？

似乎

sticky

对

和

colspan

不起作用。有办法绕过它吗

正文{
字体系列：“露西达格兰德”；
}
div{
宽度：500px；
高度：200px；
溢出：滚动；
}
运输署，
th{
填充物：2px 5px；
空白：nowrap；
}
.粘头{
位置：粘性；
职位：-网络工具包粘性；
排名：0；
背景#146775；
颜色：白色；
z指数：3；
}
.粘性标题：第一个子项{
左：0；
z指数：4；
}
.黏糊糊的一排{
位置：粘性；
职位：-网络工具包粘性；
左：0；
顶部：23px；/*这似乎对Safari、FF、Chrome等的工作方式有所不同。此处针对FF进行了调整*/
背景：#1C4464；
颜色：白色；
z指数：3；
}
.sticky行：第n个子行（2）{
左：100px；/*如何使其动态*/
z指数：2；
}
跨度{
位置：绝对位置；
顶部：2个；
左：113px；
}
.粘柱{
位置：粘性；
职位：-网络工具包粘性；
左：0；
背景#569CA8；
颜色：白色；
z指数：1；
宽度：100px；/*如何使其动态*/
}

标题1
标题2
标题3
标题4
标题5
标题7
标题8
标题9
标题10
粘性第1行
我怎样才能使这个粘乎乎的？
第1栏
第2栏
第3栏
第4栏
第5栏
第7栏
第8栏
第9栏
第10栏
第1栏
第2栏
第3栏
第4栏
第5栏
第7栏
第8栏
第9栏
第10栏
第1栏
第2栏
第3栏
第4栏
第5栏
第7栏
第8栏
第9栏
第10栏
粘滞的第2行粘滞的第2种方法
第1栏
第2栏
第3栏
第4栏
第5栏
第7栏
第8栏
第9栏
第10栏
第1栏
第2栏
第3栏
第4栏
第5栏
第7栏
第8栏
第9栏
第10栏
第1栏
第2栏
第3栏
第4栏
第5栏
第7栏
第8栏
第9栏
第10栏
第1栏
第2栏
第3栏
第4栏
第5栏
第7栏
第8栏
第9栏
第10栏
粘性第3排
我怎样才能使这个粘乎乎的？
第1栏
第2栏
第3栏
第4栏
第5栏
第7栏
第8栏
第9栏
第10栏
第1栏
第2栏
第3栏
第4栏
第5栏
第7栏
第8栏
第9栏
第10栏
第1栏
第2栏
第3栏
第4栏
第5栏
第7栏
第8栏
第9栏
第10栏
第1栏
第2栏
第3栏
第4栏
第5栏
第7栏
第8栏
第9栏
第10栏
第1栏
第2栏
第3栏
第4栏
第5栏
第7栏
第8栏
第9栏
第10栏
第1栏
第2栏
第3栏
第4栏
第5栏
第7栏
第8栏
第9栏
第10栏
第1栏
第2栏
第3栏
第4栏
第5栏
第7栏
第8栏
第9栏
第10栏
第1栏
第2栏
第3栏
第4栏
第5栏
第7栏
第8栏
第9栏
第10栏
第1栏
第2栏
第3栏
第4栏
第5栏
第7栏
第8栏
第9栏
第10栏
第1栏
第2栏
第3栏
第4栏
第5栏
第7栏
第8栏
第9栏
第10栏

实际上它已经粘了，问题是由于td的宽度，没有理由移动它。因此，为了使它们都具有粘性，请更改第二个td上的colspan（为了使其更好，还应将其左移50像素，使其彼此相邻移动）。希望这能解决你的问题

更新：

第二个td上的colspan就是代码不起作用的原因，我通过将结构替换为

<tr class="darkblue">
    <td class="sticky-row">Sticky Row 1</td>
    <td class="sticky-row" colspan>How can I make this sticky?</td>
    <td colspan="8"></td>
  </tr>

下面是完整的参考代码

正文{
字体系列：“露西达格兰德”；
}
div{
宽度：500px；
高度：200px；
溢出：滚动；
}
运输署，
th{
填充物：2px 5px；
空白：nowrap；
}
.粘头{
位置：粘性；
职位：-网络工具包粘性；
排名：0；
背景#146775；
颜色：白色；
z指数：3；
}
.粘性标题：第一个子项{
左：0；
z指数：4；
}
深蓝色{
背景：#1C4464；
宽度：100%；
}
.黏糊糊的一排{
位置：粘性；
职位：-网络工具包粘性；
左：0；
顶部：23px；
/*背景：#1C4464*/
颜色：白色；
z指数：3；
}
.sticky行：第n个子行（2）{
左：100px；/*如何使其动态*/
z指数：2；
}
跨度{
位置：绝对位置；
顶部：2个；
左：113px；
}
.粘柱{
位置：粘性；
职位：-网络工具包粘性；
左：0；
背景#569CA8；
颜色：白色；
z指数：1；
宽度：100px；/*如何使其动态*/
}

标题1
标题2
标题3
标题4
标题5
标题7
标题8
标题9
标题10
粘性第1行
我怎样才能使这个粘乎乎的？
第1栏
第2栏
纵队
.darkblue {
  background: #1C4464;
  width: 100%;
}

.sticky-row {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  top: 23px;
  color: white;
  z-index: 3;
}

<div>
    <table>
        <tr>
            <td class="sticky left">Sticky</td>
            <td class="sticky" colspan="9">How can I make this sticky?</td>
        </tr>
        <tr class="tableBody">
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
        </tr>
    </table>
</div>

div {
  width: 300px;
  overflow: scroll;
}
.sticky {
  position: fixed;
  left: 50px;
  background: white;
}
.left{
  left:0;
}
tr.tableBody
{
   line-height:50px;
}