具有固定标题的HTML表和iPhone的固定第一列

我正在开发针对iPhone优化的网络应用.

在其中一页上,我将有一个包含数百行和数十列的表.

我希望它能正常工作,以便当用户向右滚动时第一列是固定的(保持可见),而当用户向下滚动时(例如,像Excel中的“冻结窗格”),标题是固定的.

还有另一篇文章解决了这个确切的问题：

HTML table with fixed headers and a fixed column?

…并提出了一个极好的解决方案：

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

…和演示：http://acatalept.com/common/test/fixed-table.html

但是,这似乎不适用于iPhone-整个PAGE都会滚动.

我将如何修改此示例,使其在iPhone上运行？

(幸运的是,一个解决方案仅需要在iPhone上运行,因此我可以利用任何特定的Webkit功能,而忽略其他浏览器的问题.当然,与跨浏览器兼容的解决方案甚至更好…)

[更新]

好的,所以我意识到我在问一个错误的问题.

我认为,问题在于iPhone的Webkit不能提供一种在固定大小(宽度/高度)div内滚动内容的本地方法.因此,基本上不可能有固定的页眉/页脚和滚动中心区域.

(下面的Galambalazs回答是一个很好的答案,它可以在我测试过的任何DESKTOP浏览器中使用,但不适用于iPhone,因为它可以滚动整个页面,而不是仅滚动表主体).

然后,我遇到了Mateo Spinelli的iScroll(http://cubiq.org/iscroll).我尚未完成所需的完整解决方案,但是他的脚本似乎可以解决我遇到的确切问题.

我无法评论他的代码如何工作,但是他的演示绝对很棒,因此我的直觉是iScroll将是一个很好的解决方案.

最佳答案

UPDATE

我想我为您找到了解决方案：Matteo Spinelli的iScroll

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.

您可以在这里找到一个漂亮的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,因为滚动条