iPhone 上带有固定标题和第一列的 HTML 表格

Question

我正在开发一个专为iPhone优化的Web应用。

在其中一个页面上，我将有一张包含几百行和数十列的表格。

我希望使第一列固定不动（保持可见），当用户向右滚动时，标题行也能够固定不动（就像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上似乎无法正常工作 - 整个页面都会被滚动。

我该如何修改这个例子，以便在iPhone上运行？

（幸运的是，解决方案只需要在iPhone上运行，因此我可以利用任何特定的Webkit功能，并忽略其他浏览器的问题。当然，跨浏览器兼容解决方案更好...）

[更新]

好吧，我意识到我问错了问题。

我认为问题在于iPhone的Webkit没有提供在一个固定大小（宽度/高度）的div中滚动内容的本机方式。因此，基本上无法同时拥有固定的页眉/页脚和可滚动的中央区域。

（Galambalazs下面的答案是一个很好的答案，在我测试的任何桌面浏览器中都可以正常工作，但在iPhone上无法正常工作，因为它滚动的是整个页面而不是表格主体部分）。

然后，我发现了Mateo Spinelli的iScroll（http://cubiq.org/iscroll）。我还没有完成我正在寻找的完整解决方案的实现，但他的脚本似乎能够处理我遇到的确切问题。

我还不能对他的代码的效果发表评论，但他的演示非常出色，所以我猜想iScroll将是一个很好的解决方案。

- mattstuehler

Answer 1

更新

我认为我为您找到了解决方案：iScroll 由Matteo Spinelli创建

移动端webkit的overflow：scroll方式。 该项目始于因iPhone的webkit无法提供在固定大小（宽度/高度）的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

- gblazex

---

感谢您的详细回复！然而，在 iPhone 上似乎无效。当我查看时，表格主体不会绘制垂直滚动条，而且在屏幕拖动时会移动整个页面，而不仅仅是 tbody 部分。就其价值而言，在 Mac 上的 Safari 中可以完美运行，但这并不是我想要的。 - mattstuehler

我刚注意到你自己找到了这个脚本。那就祝你好运吧。 :) - gblazex

如果你找到了一个好的解决方案，我很感兴趣知道你是否能分享你的代码。我需要一个好的iScroll表格选项。 - Micaël Félix

Answer 2

好的，我意识到我问错了问题。

我认为问题在于iPhone的webkit没有提供一种原生的方法来滚动固定大小（宽度/高度）的div中的内容。因此，基本上不可能同时拥有固定的页眉/页脚和可滚动的中央区域。

（Galambalazs的答案非常好，在我测试的任何桌面浏览器中都有效，但在iPhone上无效，因为它会滚动整个页面而不是仅滚动表格主体）。

然后，我发现了Mateo Spinelli的iScroll（http://cubiq.org/iscroll）。我还没有完成我正在寻找的完整解决方案的实现，但他的脚本似乎处理了我遇到的确切问题。

我还不能评论他的代码的工作情况，但他的演示非常完美，所以我猜想iScroll将是一个很好的解决方案。

非常感谢，Mateo！

- mattstuehler

Answer 3

你不能用两根手指滑动来滚动这样的div吗？（是的，这很难懂，但我知道它可以用于iFrames。）

- hdort

---

Hdort，感谢您的回答。您绝对是正确的——双指滑动确实有效。但我发现许多非技术人员（我的大多数用户）并不知道这个手势，所以我不能构建依赖它的用户界面。我还注意到，双指滚动速度较慢，经常卡顿，并且没有与高质量iPhone应用程序相关联的酷炫惯性滚动效果。因此，我希望有更加优雅的解决方案。 - mattstuehler