Fixed header HTML table and fixed first column for iPhone

Question

I am working on a web application optimized for iPhone.

On one of the pages I will have a table with hundreds of rows and dozens of columns.

I would like it to work so that the first column is fixed (remains visible) when the user scrolls to the right, and the headers are fixed as the user scrolls (that is, as "freezing windows" in Excel).

There is another publication that addresses this EXACT question:

HTML table with fixed headers and fixed column?

... and is a great solution:

http://fixed-header-using-jquery.blogspot.com/2009/05/scrollable-table-with-fixed-header-and.html

... and demo: http://acatalept.com/common/test/fixed-table.html

However, this does not seem to work on the iPhone - all PAGE scrolls.

How do I change this example to work on iPhone?

(Fortunately, the solution should ONLY work on the iPhone, so I can use any specific webkit features and ignore problems with other browsers. Of course, a solution compatible with multiple browsers is even better ...)

[UPDATE]

OK, so I realized that I asked the wrong question.

The problem, I believe, is that webkit for iPhone does not provide its own way of scrolling content within a specific size (width / height). Thus, in principle, it was not possible to have a fixed header / footer and a scrollable central area.

( Galambalazs - DESKTOP, , iPhone, ).

Mateo Spinelli iScroll (http://cubiq.org/iscroll). , , script, , , .

, , , , iScroll .

Answer 1

, , .

, , , webkit iPhone (/). , / .

( Galambalazs DESKTOP, , iPhone, ).

Mateo Spinelli iScroll (http://cubiq.org/iscroll). , , script, , , .

, , , , iScroll .

, Mateo!

Answer 2

UPDATE

, : iScroll by Matteo Spinelli

: -. , webkit iPhone (/) div. / . .

---

CSS: http://www.imaputz.com/cssStuff/bigFourVersion.html

, webkit, : 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 -

Answer 3

divs ? (, , , iFrames.)