CODEWITHSUNDEEP
javascriptjquerycsscss-tablessticky
Punit
Punit

Reputation: 1120

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

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

Upvotes: 7

Views: 12852

Answers (2)

user926352
user926352

Reputation:

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.

Upvotes: 15

OpenGG
OpenGG

Reputation: 4540

@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;
}

Upvotes: 4

Related Questions