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

Question

我正在开发一个针对 iPhone 优化的网络应用程序。

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

我想让它工作，以便当用户向右滚动时第一列是固定的(保持可见)，并且当用户向下滚动时标题是固定的(即，像 Excel 中的“卡住 Pane ” ).

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

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 内滚动内容的 native 方式。所以基本上不可能有一个固定的页眉/页脚和一个滚动的中心区域。

(下面 Galambalaz 的回答非常好，在我测试过的任何桌面浏览器中都有效，但在 iPhone 中无效，因为它不是只滚动表格主体，而是滚动整个页面)。

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

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

Answer 1

UPDATE

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

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-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 因为有滚动条