HTML table with fixed headers and a fixed first column for the iPhone

Question

All,

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:

http://stackoverflow.com/questions/684211/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...)

Many thanks in advance!

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

Many thanks, Mateo!

Answer 1

UPDATE

I think i found the solution for you: iScroll by Matteo Spinelli

The overflow:scroll for mobile webkit. Project started because 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. Until now.

---

You can find a pretty neat CSS solution here: http://www.imaputz.com/cssStuff/bigFourVersion.html

A very basic webkit-only stripped down version would be: http://jsbin.com/awoqi/2

CSS

.viewport        { overflow: hidden; width:616px; height:300px;  }
table            { overflow: hidden; width:616px;  }
table td         { width: 200px; } 
.fixedHeader tr  { display: block; }
.fixedHeader th  { width: 200px; text-align:left; padding-right: 16px; }
.scrollContent   { overflow: auto; display: block; height: 300px; }

HTML

<div class="viewport">
<table border="0" cellpadding="0" cellspacing="0"  class="scrollTable"> 
<thead class="fixedHeader"> 
  <tr> 
    <th>Header 1</th> 
    <th>Header 2</th> 
    <th>Header 3</th> 
  </tr> 
</thead> 
<tbody class="scrollContent"> 
  <tr> 
    <td>Cell Content 1</td> 
    <td>Cell Content 2</td> 
    <td>Cell Content 3</td> 
  </tr> 
  <tr> 
    <td>More Cell Content 1</td> 
    <td>More Cell Content 2</td> 
    <td>More Cell Content 3</td> 
  </tr>
</tbody> 
</table> 
</div>

600+16px because of the scrollbar

Answer 2

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!