Sticky table columns

[Cruelemort]

All,

I have a requirement to build a div in a page that contains a table of
plane details, and one of the columns (on the left - tail number)
needs to be sticky on the horizontal axis but not on the vertical axis
(i.e. when scrolling right the tail numbers need to stay visible on
the left hand side, but when scrolling down the tail numbers need to
scroll to keep up with the rest of the plane details).

I have been looking at various ways of doing this but currently to no
avail, the idea that looks most promising is to split it into two
tables and set them both to have scroll bars, the problem with this
idea was that both the tables need to be scrolled by the same amount
vertically, i could get the position of one table using the offsetTop
property but could not find a way of setting the offsetTop property
for the other table so they stay aligned. The other issue with this is
that it would be using the onscroll property which does not seem to
show any distinction between horizontal and vertical scrolls....

Any ideas of how this could be done would be appreciated.

Many thanks.

Ian

 

[Cruelemort]

All,

I have a requirement to build a div in a page that contains a table of
plane details, and one of the columns (on the left - tail number)
needs to be sticky on the horizontal axis but not on the vertical axis
(i.e. when scrolling right the tail numbers need to stay visible on
the left hand side, but when scrolling down the tail numbers need to
scroll to keep up with the rest of the plane details).

I have been looking at various ways of doing this but currently to no
avail, the idea that looks most promising is to split it into two
tables and set them both to have scroll bars, the problem with this
idea was that both the tables need to be scrolled by the same amount
vertically, i could get the position of one table using the offsetTop
property but could not find a way of setting the offsetTop property
for the other table so they stay aligned. The other issue with this is
that it would be using the onscroll property which does not seem to
show any distinction between horizontal and vertical scrolls....

Any ideas of how this could be done would be appreciated.

Many thanks.

Ian

Ok bit of an update since posting (typical i find some of the solution
just after posting) -

I have found that the scrollTop and scrollLeft properties can be used
and set to scroll windows certain amounts (so can set the scrollTop
value of the left hand table when scrolling the right hand table).
This just leaves me with two problems, the first is the recursive
scroll call - making a scroll in an onscroll method call will call the
onscroll method again, and so on, and the second is telling the
difference between a horizontal and vertical scroll (this could be
solved with some hack which includes storing the current scrollLeft
and scrollTop property and testing the new ones in the onscroll method
to see if the vertical or horizontal has changed, but i am hoping
there is some better way of doing this)

Many thanks.

 

[Ivo]

For an example that uses only CSS to achieve a sticky column, and, well, two
tables nested in a third, see
http://4umi.com/web/css/table.htm
There is no Javascript in sight!
It does not work for long tables that need to scroll vertically on a
stationary page, but perhaps this will give you some ideas.

I have found that the scrollTop and scrollLeft properties can be used
and set to scroll windows certain amounts (so can set the scrollTop
value of the left hand table when scrolling the right hand table).
This just leaves me with two problems, the first is the recursive
scroll call - making a scroll in an onscroll method call will call the
onscroll method again, and so on,

Have you tried this? Usually onevent functions are only called when the
event is triggered for real, not when it 's done through script.

and the second is telling the
difference between a horizontal and vertical scroll

Whenever the event is called, you set the correct X and Y amounts,
regardless of whether they have changed or not. I don't see a problem.

hth
Ivo
http://4umi.com/web/css/table.htm

 

[Cruelemort]

For an example that uses only CSS to achieve a sticky column, and, well, two
tables nested in a third, seehttp://4umi.com/web/css/table.htm
There is no Javascript in sight!
It does not work for long tables that need to scroll vertically on a
stationary page, but perhaps this will give you some ideas.


Have you tried this? Usually onevent functions are only called when the
event is triggered for real, not when it 's done through script.


Whenever the event is called, you set the correct X and Y amounts,
regardless of whether they have changed or not. I don't see a problem.

hth
Ivohttp://4umi.com/web/css/table.htm

Thanks Ivo, i finally fixed the problem, created a left and right div
each with a table in, set the overflow value to hidden for the left
one and scroll for the right one, then set a javascript method for the
right div onscroll method, in this method i set the scrollTop value of
the left div to the scrollTop value of the right div.

As per usualy fairly straight forward solution, just a case of knowign
all the properties and how they can be used.

thanks

Ian