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

javascript jquery css css-tables sticky
Punit picture Punit · Oct 7, 2011 · Viewed 10k times · Source

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:enter image description here

Answer

user926352 picture user926352 · Oct 7, 2011

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.

Related questions

CSS Alternate Rows - some rows hidden

I'm trying to style a table so that each row is a different colour (odd/even). I have the following CSS: #woo tr:nth-child(even) td { background-color: #f0f9ff; } #woo tr:nth-child(odd) td { background-color: white; } However, some of …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More