如何使表的第一列和第二列具有粘性

i have a div with with property

我有一个带有属性的div。

<div id="_body_container" style="height: 500px; overflow-x: auto; overflow-y: auto; ">
</div>`

inside this div i have the table which has class views-table, this table has 100% width which makes it's parent div:_body_container scrollable.I want to fix the first and the second column of this table sticky at their positions while the left and right scroll event happen for _body_container

在这个div中，我有一个具有类views-table的表，这个表有100%的宽度，这使得它的父div:_body_container可滚动。我想把这个表的第一列和第二列固定在它们的位置，而左右滚动事件发生在_body_container中

structure is like: 如何使表的第一列和第二列具有粘性

这样的结构是:

2 个解决方案

#1

Assuming each section is a <td> element...

假设每个部分都是元素…

CSS

CSS

table {
    position: relative;
    padding-left: (width-of-your-td-elements);
}
table td:first-of-type {
    position: absolute;
    left: 0;
}

Try that out. It's late and I'm drunk, so I'm not entirely sure on this. Oh, and keep in mind this is using CSS3, which isn't supported in <= IE8.

试一试。很晚了，我喝醉了，所以我不太确定。哦，记住这是使用CSS3，在<= IE8中不支持CSS3。

If this works, you could just add position:absolute; left:0; to a class and target the first element that way.

如果这样做，你可以添加位置:绝对;左:0;指向类，并以这种方式针对第一个元素。

#2

@vonkly is almost right about position:absolute. But you don't have to set left:0. With left:auto, you can spare position:relative too.

@vonkly这个词的定位几乎是正确的:绝对。但你不必把它设为左:0。左:自动，你也可以空出位置:相对。

table {
    padding-left: (width-of-your-td-elements);
}

table td:first-of-type {
    position: absolute;
}

#1