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

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 功能，而忽略其他浏览器的问题。当然，一个跨浏览器兼容的解决方案更好......）

[更新]

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

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

（下面 Galambalazs 的回答非常出色，可以在我测试过的任何桌面浏览器中使用，但不能在 iPhone 中使用，因为它不是仅滚动表格主体，而是滚动整个页面）。

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

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

Answer 1

更新

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

移动 webkit 的溢出：滚动。 项目开始是因为 webkit for iPhone 不提供原生方式 在固定大小内滚动内容 （宽度/高度）div。所以基本上它 不可能有一个固定的 页眉/页脚和滚动中心 区域。到现在为止。

---

您可以在这里找到一个非常简洁的 CSS 解决方案：http://www.imaputz.com/cssStuff/bigFourVersion.html

一个非常基本的 webkit-only 精简版是：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 的回答非常好，可以在我测试过的任何桌面浏览器中使用，但在 iPhone 中却不行，因为它不仅滚动表格正文，还滚动整个页面）。

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

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

非常感谢，马特奥！

Answer 3

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