I’m working on a web app that’s optimized for an iPhone.
On one of the pages, I’ll have a table with hundreds of rows, and dozens of columns.
I’d like to have it work so that the first column is fixed (remains visible) as the user scrolls to the right, and the headers are fixed as the user scrolls down (i.e., like “freeze panes” in Excel).
There’s another post that addresses this EXACT question:
HTML table with fixed headers and a fixed column?
… and presents an excellent solution:
http://fixed-header-using-jquery.blogspot.com/2009/05/scrollable-table-with-fixed-header-and.html
… and a demo: http://acatalept.com/common/test/fixed-table.html
However, this doesn’t seem to work on an iPhone – the entire PAGE scrolls.
How would I modify this example so that it works on the iPhone?
(Fortunately, a solution ONLY needs to work on a iPhone, so I can take advantage of any specific webkit features, and ignore issues with other browsers. Of course, a cross-browser compliant solution is even better…)
[UPDATE]
OK, so I realized I was asking the wrong question.
The issue, I believe, is that webkit for iPhone does not provide a native way to scroll content inside a fixed size (width/height) div. So basically it was impossible to have a fixed header/footer and a scrolling central area.
(Galambalazs answer below is an excellent one, and works in any DESKTOP browser I tested, but not in the iPhone, since, instead of scrolling only the table body, it scrolls the entire page).
Then, I came across Mateo Spinelli’s iScroll (http://cubiq.org/iscroll). I haven’t finished implementing the full solution I was looking for, but his script seems to handle the exact problem I was having.
I can’t comment yet on how well his code works, but his demos are absolutely terrific, so my hunch is that iScroll is going to be a great solution.
OK, so I realized I was asking the wrong question.
The issue, I believe, is that webkit for iPhone does not provide a native way to scroll content inside a fixed size (width/height) div. So basically it was impossible to have a fixed header/footer and a scrolling central area.
(Galambalazs answer is an excellent one, and works in any DESKTOP browser I tested, but not in the iPhone, since, instead of scrolling only the table body, it scrolls the entire page).
Then, I came across Mateo Spinelli’s iScroll (http://cubiq.org/iscroll). I haven’t finished implementing the full solution I was looking for, but his script seems to handle the exact problem I was having.
I can’t comment yet on how well his code works, but his demos are absolutely perfect, so my hunch is that iScroll is going to be a great solution.
Many thanks, Mateo!