Table with fixed header, scrollbar issue

I have a table and i'd like to display a fixed header

i have looked at a few methods and i have got something up and running

http://cloud-contractor.co.uk/testtab.php

the problem i have is with the scroll bar. in that, it alters the columns and the fixed header is out. whats the best way to solve this ?

i've looked at several approaches. i would rather use a table than a pure div approach.

i have also looked at http://imar.spaanjaars.com/357/a-scrollable-table-with-a-fixed-header which provides extra space for the scrollbar.. difficult to do when using width percentages as i am.

this approach has different column widths http://www.imaputz.com/cssStuff/bigFourVersion.html

the closest i have come is this approach
http://www.cssplay.co.uk/menu/tablescroll.html

but it used an absolute fixed header which caused problems as i looked into

thanks
maddisoncrAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I'm not totally sure of your question.   For this one, http://cloud-contractor.co.uk/testtab.php just add a little more width to the right most column.  

http://www.imaputz.com/cssStuff/bigFourVersion.html is nice too.


fyi, on a mac notebook and newer mac's with a pad, gestures make the scroll and no need to even use the scroll bar.  Same will be true for tablets and phones or any device with touch screen.
0
ramyajanarthananCommented:
0
maddisoncrAuthor Commented:
Thanks for the links.. I've tried them all out

i am using percentage widths as opposed to pixel widths..

i have used the coboldinosaur approach in http://cloud-contractor.co.uk/del2.php

but it doesn't work out with percentages

the http://www.imaputz.com/cssStuff/bigFourVersion.html  is similar as well in that, the header and table don't really line up properly

i am guessing this only really leaves a jquery approach.. which i don't mind

if anyone has any ideas.. i did check the above link and it leads to chromatable which is no longer supported
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Take a look at datatables  http://www.datatables.net/  

It does take a little learning curve to fully understand it and you have to have a well formed table.   The basic usage is well documented, http://www.datatables.net/release-datatables/examples/basic_init/zero_config.html.  There is a scroll option http://www.datatables.net/release-datatables/examples/basic_init/scroll_y.html and a plug in for infinite scroll as well.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.