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

Question

i have a div with with property

<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

structure is like:

Solution

@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.

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

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