CSS粘性，桌侧栏第一列不粘

Question

对于一个项目，我需要桌子头和侧边栏（前6列）是固定/粘性的。

到目前为止，我的解决方案可以使用，但对浏览器（只有Chrome和Edge）都没有。 在Firefox和Safari中，我有一个问题，即第一列在滑到侧面和向下时不会保持固定。第2列和以下内容保持固定。

.sidebar{
position: sticky;
}

.column1{
left:0;
}

.column2{
left: 10vw;
}

.column3{
left: 20vw;
}

.column4{
left: 30vw;
}

.column5{
left: 40vw;
}

.column6{
left: 50vw;
}

<table>
    <thead>
        <tr>
            <td class="th1">1</td>
            <td class="th2">2</td>
            <td class="th3">3</td>
            <td class="th4">4</td>
            <td class="th5">5</td>
            <td class="th6">6</td>
            
            <td> a lot more tds </td>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td class="sidebar column1">col 1</td>
            <td class="sidebar column2">col 2</td>
            <td class="sidebar column3">col 3</td>
            <td class="sidebar column4">col 4</td>
            <td class="sidebar column5">col 5</td>
            <td class="sidebar column6">col 6</td>
            
            <td> a lot more tds </td>
        </tr>
    </tbody>
</table>

Answer 1

位置：粘性; 在大多数现代浏览器上工作正常，您可以在此处看到

https://caniuse.com/?search=position%20%3asticky%20

但是，粘性元素的行为就像相对的作用，

直到给定位置
例如， top：0;

这是粘性的行为与元素边界达到指定位置（顶部：0）时相对的行为不同

，因此它开始像固定元素一样起作用，

所以我认为您的问题是省略了TOP或左值但是您的代码在这里不完整，您正在设置位置：粘性; to .sidebar ，在您的html中未使用...-

= - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = -

您的表格和TH元素也应具有 width 与您的TD元素一起，

我尝试了它使用 width ，如您所述，它可以使用

“ https://jsfiddle.net/mahdiar_mansouri/27k9cv6f/3/”