Table with fixed header, scrollbar issue

Posted on 2013-09-26
Medium Priority
Last Modified: 2013-09-30
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


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

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

Question by:maddisoncr
  • 2
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39526769
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.

Assisted Solution

ramyajanarthanan earned 200 total points
ID: 39527506

Author Comment

ID: 39530177
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
LVL 54

Accepted Solution

Scott Fell,  EE MVE earned 1800 total points
ID: 39530483
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.

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question