473,326 Members | 2,134 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

Sticky table columns

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

May 2 '07 #1
3 2368
On 2 May, 18:37, Cruelemort <ian.ing...@gmail.comwrote:
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.

May 2 '07 #2
Ivo
"Cruelemort" <ia********@gmail.comschreef
Cruelemort <ian.ing...@gmail.comwrote:
>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).
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
May 2 '07 #3
On 2 May, 20:42, "Ivo" <n...@thank.youwrote:
"Cruelemort" <ian.ing...@gmail.comschreef
Cruelemort <ian.ing...@gmail.comwrote:
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).

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.
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
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

May 3 '07 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: michael nieuwenhuizen | last post by:
how do i create a sticky form with multiple fields? say i want a form with: name: address: country: and if a user presses the submit button it will show
7
by: Bing Wu | last post by:
Hi Folks, I have a very large table containing 170 million rows of coordinats: CREATE TABLE "DB2ADMIN"."COORDINATE" ( "FID" INTEGER NOT NULL , "AID" INTEGER NOT NULL , "X" REAL NOT NULL ,...
4
by: maricel | last post by:
I have the following base table structure - DDL: CREATE TABLE "ADMINISTRATOR"."T1" ( "C1" INTEGER NOT NULL ) IN "TEST_TS" ; ALTER TABLE "ADMINISTRATOR"."T1" ADD PRIMARY KEY
1
by: kingster | last post by:
Hi, I have a regular dataset and all i want to do is make a pivot table display in a browser with the datasource of the pivot table to be this dataset and then the end-user will be able to do...
4
by: dac | last post by:
I am quietly going insane on this project. I've never worked on a project like this one before. All my previous sticky forms were for data entry, not editing. I don't know how to display the form...
4
by: Hemant Shah | last post by:
Folks, Our client has a program that browses whole table from begining to end. The table has 1 million rows in it. REORGCHK does not show any problems. It has unique index defined on KEY0...
5
by: wugon.net | last post by:
question: db2 LUW V8 UNION ALL with table function month() have bad query performance Env: db2 LUW V8 + FP14 Problem : We have history data from 2005/01/01 ~ 2007/05/xx in single big...
7
by: TG | last post by:
hi! I am trying to create a sql server table from an excel sheet. Here is the code I have: 'This procedure the xlsx file and dumps it to a table in SQL Server
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.