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:

Answer 1

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

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.

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

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

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

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