fix position of overlapping element on scroll using relative and absolute positions

Question

I have a div with fixed width and height, overflow: scroll and position: relative . Inside I have two table elements, first one containing 10 columns, and the second one which is a copy of the first table and has its first 3 columns only. I gave position:absolute to the second table and given that both tables have save styling the second table will overlap the first one. My requirement is when the div is scrolled horizontally, I want the second table which is overlapping the first one to be fixed, ie, it should not move on horizontal scroll, and on vertical scroll the content of second table should be scrolled properly.

I have created the following fiddle with what I have so far:

JS Fiddle

Answer 1

I don't think that's possible with css. What you are asking is for the left hand table to scroll vertically with it's container div, but not to scroll horizontally.

I'd have a re-think on your requirements here.

You could just put the right hand table inside a div with overflow:scroll, so only that one moves when you scroll horizontally. You'd have the issue then of the two no longer being lined up when you scroll vertically - could you make it high enough so so the whole table displays? Would that work for you?

EDIT:

In your js-fiddle then you've set height:500px; for .container.

If you don't need that, then remove it so things will set their own height and display the whole table. Then you only have the sideways scroll to deal with, and that's doable (eg put a wrapper on the right hand table only that has overflow:scroll)

No I'd not use position:fixed here, that sets something relative to the browser window, which is no good for users scrolling up and down.

have a look at this: http://www.barelyfitz.com/screencast/html-training/css/positioning/

that's great to get your head around css positioning.