我正在开发针对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).我尚未完成所需的完整解决方案,但是他的脚本似乎可以解决我遇到的确切问题.
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,因为滚动条
