How can I make the first and second column of the table sticky

Question

i has divwith property

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

inside this div, I have tableone that has a class views-table, this table has a width of 100%, which makes it the parent div: _body_containerscrollable.I want to fix the first and second columns of this table sticky at their position, while the left and right scroll event occur for_body_container

Structure

looks like:

Answer 1

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

CSS

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

. , , . , , CSS3, <= IE8.

, position:absolute; left:0; class .

Answer 2

@vonkly position:absolute. left:0. left:auto position:relative.

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

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