7

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

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Punit
  • 1,110
  • 1
  • 8
  • 14
  • possible duplicate of [HTML table with fixed headers and a fixed column?](http://stackoverflow.com/questions/684211/html-table-with-fixed-headers-and-a-fixed-column) – Anuraj Oct 07 '11 at 07:45

2 Answers2

15

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.

  • i already tried this one. if the position absolute to the first column it's not any more inside the scrollable window it become visible to the entire page up to it's height. – Punit Oct 07 '11 at 07:58
  • That's why you set `position: relative;` on the parent element. –  Oct 07 '11 at 08:22
  • i think it's work, need some modification. Thanks for your attention – Punit Oct 07 '11 at 08:24
  • yeah, it does. i'll tackle it tomorrow if it still hasn't been solved. and no problem! –  Oct 07 '11 at 08:35
  • 3
    Actually laughed out loud at "It's late and I'm drunk, so I'm not entirely sure on this". – Matt Fletcher Mar 13 '13 at 12:16
4

@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;
}
OpenGG
  • 4,345
  • 2
  • 24
  • 31