滚动具有多个固定表头的表
在我尝试重新发明轮子之前(通过jQuery插件或类似的)，我想看看是否有更简单的方法来做到这一点，或者用户可能知道的现有插件。我要做的是滚动包含多个表头的表体。例如，想象一下这个结构：
<table>
<thead>
<tr>
<td colspan="2"></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="2"></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>老实说，我还没有尝试过上面的语法来看看它是否有效。我拥有的实际标记当前不使用and /tbody，而是滚动整个父div (如下所示)。
我想要实现的是滚动整个表格，这样最相关部分的标题就可以在顶部看到。当前滚动出视图的标题是有足够的行。
我知道用一个标题滚动表格的各种技术，但是多个标题呢？有没有任何现有的方法来实现这一点？我对不同的想法持开放态度，但现在我只想简单地在顶部显示与内容最相关的表头。
回答 1
Stack Overflow用户
发布于 2011-11-12 04:33:13
几个月前，我编写了一些代码，在我希望标题执行类似于iOS上的节标题的地方执行了这些操作。利用Jquery，我最终得到的解决方案涉及创建一个onScroll (和用于调整窗口大小的onResize )事件侦听器，该侦听器检查所有$('table thead')并检查页面上的$(this).position()。
检查thead的位置是否在当前视口顶部的上方。
一旦我找到了最相关的标题(视口上方最底层的thead )，我创建了一个新的table，将position: fixed设置为(0，0)，并将标题行的每一列的新列复制到其中，并手动设置其width属性以匹配原始表。
I have put together a Proof of Concept which shows how this all works。
下面是它的工作原理的一些伪代码：
- 检查表格是否可见
- 获取列表中所有
thead部分的列表 - 查找数组中顶部位置小于<
thead>d19scrollTop >元素 - 的第一个元素(如果我们找到一个元素)：
- 创建标题的深层副本
- 创建容器表
- 复制原始表中的属性，以便样式从原始表中复制宽度等于
outerWidth的宽度的容器原始表 - 将找到的每个
td的宽度设置为来自原始表的匹配td的宽度 - 将其添加到表中
- 如果未找到任何容器，则如果存在一个
，则从DOM中删除现有容器
还有一些其他的边缘情况细节也让这变得更好：
- 而不是(0，0)，固定行的原点是根据具有固定标题的
tbody下面的标题行是否应将其推开而更改的。 - 确保在创建新标题行之前删除以前的标题行
- 如果要创建的标题行与已有标题行相同，请不要重新创建标题行
这种方法的效果要好得多，我尝试过的其他方法，比如尝试position:absolute一个对象，因为火狐和IE在运行onScroll处理程序时速度不是令人难以置信，所以你往往会看到“抖动”。我还尝试了修改thead的position属性，结果是表列宽度跳跃，与数据不匹配。
这个解决方案并不严格需要thead节点，因为您可以使用其他一些选择器来确定哪些行是标题等。
更新：添加了示例代码和伪代码更新：Dropbox更改了系统，将示例替换为jsfiddle URL
https://stackoverflow.com/questions/8043621
复制相似问题
腾讯云开发者
