Can somebody please help me? i'm having a big problem on tables. Our client want to have a table where its columns are expandable and the headers of the table can be viewed no matter how many rows there are(you can always see the header even if you scroll down the table). It is exactly how an excel table behaves.
I am really having a hard time researching about this. Thank you!:)
macy2323
0
Newbie Poster
digital-ether
399
Nearly a Posting Virtuoso
Team Colleague
Can somebody please help me? i'm having a big problem on tables. Our client want to have a table where its columns are expandable and the headers of the table can be viewed no matter how many rows there are(you can always see the header even if you scroll down the table). It is exactly how an excel table behaves.
I am really having a hard time researching about this. Thank you!:)
This is probably better suited for the JavaScript forum. They would be more able to help you there.
What you would want is to have the table header (or div with a copy of the table headers) detach from the top of the table when the window scrolls lower then the header, That way the header will always appear at the top of the table.
This can be done with JavaScript, and some CSS.
You'll need to know when the window scrolls. (window.onScroll event)
The amount of scroll. (window.scrollTop)
The dimensions of the window. (browser dependent, good reference at quirksmode.com and http://www.howtocreate.co.uk/tutorials/javascript/browserwindow)
The offset from the top, of the table. (offsetTop http://www.quirksmode.org/js/findpos.html)
How to float an HTML element as well as move it. (CSS position:absolute and top, left properties)
I'd recommend the mooTools library. It has methods that will account for different browsers and calculate what you want for you. However you could probably put it together with a bit of googling.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.