Question

我正在开发一款针对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功能，并忽略其他浏览器的问题。当然，跨浏览器兼容的解决方案甚至更好......）

[UPDATE]

好的，所以我意识到我在问错误的问题。

我认为，问题在于，针对iPhone的webkit不提供在固定大小（宽度/高度）div内滚动内容的本机方式。所以基本上不可能有一个固定的页眉/页脚和一个滚动的中心区域。

（下面的Galambalazs答案非常好，可以在我测试的任何DESKTOP浏览器中使用，但不适用于iPhone，因为它不是仅滚动表体，而是滚动整个页面。）

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

我还不能评论他的代码是如何运作的，但他的演示非常棒，所以我的预感是iScroll将是一个很好的解决方案。

Answer 1

更新

我想我找到了适合你的解决方案：Matteo Spinelli的 iScroll

溢出：滚动移动webkit。项目开始是因为webkit for 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 2

好的，所以我意识到我在问错误的问题。

我认为，问题在于，针对iPhone的webkit不提供在固定大小（宽度/高度）div内滚动内容的本机方式。所以基本上不可能有一个固定的页眉/页脚和一个滚动的中心区域。

（Galambalazs答案非常好，可以在我测试过的任何DESKTOP浏览器中使用，但不适用于iPhone，因为它不是仅滚动表体，而是滚动整个页面。）

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

我还不能评论他的代码是如何运作的，但他的演示绝对是完美的，所以我的预感是iScroll将是一个很好的解决方案。

非常感谢，Mateo！

Answer 3

你不能用两根手指滑动滚动这样的div吗？（是的，这很模糊，但我知道它适用于iFrames。）

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

3 个答案:

更新