HTML表中的冻结列在表的其余部分上具有透明覆盖

我正在尝试创建两个粘性列，它们在表中水平滚动。第一列的行为正常，但第二列是透明的，滚动时位于表中其他列和行的顶部。我尝试过调整padding和position属性，但我似乎无法让我的列在表中正确滚动

我用它作为参考

.zui表{
边界：无；
右边框：实心1px#DDEFEF；
边界塌陷：分离；
边界间距：0；
字体：标准13px Arial，无衬线；
}
.zui表thead th{
背景色：#DDEFEF；
边界：无；
颜色：336b；
填充：10px；
文本对齐：左对齐；
文本阴影：1px 1px 1px#fff；
空白：nowrap；
}
.zui表tbody td{
边框底部：实心1px#DDEFEF；
颜色：#333；
填充：10px；
文本阴影：1px 1px 1px#fff；
空白：nowrap；
}
zui包装纸{
位置：相对位置；
}
.zui卷轴{
左边距：141px；
溢出-x：滚动；
溢出y：可见；
垫底：5px；
宽度：300px；
}
.zui table.zui-sticky-col1{
左边框：实心1px#DDEFEF；
右边框：实心1px#DDEFEF；
左：0；
位置：绝对位置；
顶部：自动；
宽度：120px；
}
.zui table.zui-sticky-col2{
左边框：实心1px#DDEFEF；
右边框：实心1px#DDEFEF；
左:20 ;；
位置：绝对位置；
顶部：自动；
宽度：60px；
}

名称
数
位置
高度
天生的
薪水
NBA/国家队之前
德马库斯-考辛斯
15
C
6'11"
08-13-1990
$4,917,000
肯塔基州/美国
伊赛亚-托马斯
22
PG
5'9"
02-07-1989
$473,604
华盛顿/美国
麦克勒摩
16
SG
6'5"
02-11-1993
$2,895,960
堪萨斯州/美国

请试一试

.zui-table tbody td {
  background-color:#fff;
}

试试这个：

.zui-table .zui-sticky-col-next {
    border-left: solid 1px #DDEFEF;
    border-right: solid 1px #DDEFEF;
    left: 100;
    position: absolute;
    top: auto;
    width: 50px;
}

.zui-table tbody td {
  background-color: #fff;
}

然后在每个HTML列中添加下一个类：

<div class="zui-wrapper">
    <div class="zui-scroller">
        <table class="zui-table">
            <thead>
                <tr>
                    <th class="zui-sticky-col">Name</th>
                    <th class="zui-sticky-col-next">Number</th>
                    <th>Position</th>
                    <th>Height</th>
                    <th>Born</th>
                    <th>Salary</th>
                    <th>Prior to NBA/Country</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="zui-sticky-col">DeMarcus Cousins</td>
                    <td class="zui-sticky-col-next">15</td>
                    <td>C</td>
                    <td>6'11"</td>
                    <td>08-13-1990</td>
                    <td>$4,917,000</td>
                    <td>Kentucky/USA</td>
                </tr>
                <tr>
                    <td class="zui-sticky-col">Isaiah Thomas</td>
                    <td class="zui-sticky-col-next">22</td>
                    <td>PG</td>
                    <td>5'9"</td>
                    <td>02-07-1989</td>
                    <td>$473,604</td>
                    <td>Washington/USA</td>
                </tr>
                <tr>
                    <td class="zui-sticky-col">Ben McLemore</td>
                    <td class="zui-sticky-col-next">16</td>
                    <td>SG</td>
                    <td>6'5"</td>
                    <td>02-11-1993</td>
                    <td>$2,895,960</td>
                    <td>Kansas/USA</td>
                </tr>
                <tr>
                    <td class="zui-sticky-col">Marcus Thornton</td>
                    <td class="zui-sticky-col-next">23</td>
                    <td>SG</td>
                    <td>6'4"</td>
                    <td>05-05-1987</td>
                    <td>$7,000,000</td>
                    <td>Louisiana State/USA</td>
                </tr>
                <tr>
                    <td class="zui-sticky-col">Jason Thompson</td>
                    <td class="zui-sticky-col-next">34</td>
                    <td>PF</td>
                    <td>6'11"</td>
                    <td>06-21-1986</td>
                    <td>$3,001,000</td>
                    <td>Rider/USA</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

名称
数
位置
高度
天生的
薪水
NBA/国家队之前
德马库斯-考辛斯
15
C
6'11"
08-13-1990
$4,917,000
肯塔基州/美国
伊赛亚-托马斯
22
PG
5'9"
02-07-1989
$473,604
华盛顿/美国
麦克勒摩
16
SG
6'5"
02-11-1993
$2,895,960
堪萨斯州/美国
马库斯-索顿
23
SG
6'4"
05-05-1987
$7,000,000
路易斯安那州/美国
杰森-汤普森
34
PF
6'11"
06-21-1986
$3,001,000
骑手/美国

再看一眼，我发现“位置”列实际上被“数字”列所覆盖。冻结的列仍与列重叠。这部分起作用。虽然锁定的列“number”仍然覆盖了“position”列。您认为使用锁定列的div和其他列的相对div可以工作吗？我试着用flex容器来做这件事，但是没有正确的代码。@KwesiC我认为这可以完成工作，你可以像我一样尝试well@KwesiC检查一下这个，希望有帮助