滚动具有多个固定表头的表

Question

在我尝试重新发明轮子（通过 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>

老实说，我还没有尝试过上面的语法来查看它是否有效。我的实际标记目前不使用 thead/tbody，而是滚动整个父 div（见下文）。

我想要实现的是滚动整个表格，以便在顶部查看最相关部分的标题。当前标题滚动到视图之外是有足够的行。

我知道用于滚动带有一个标题的表格的各种技术，但是多个呢？有没有现有的方法可以实现这一目标？我对不同的想法持开放态度，但现在我想简单地在顶部显示内容最相关的表格标题。

Answer 1

几个月前，我编写了一些代码，正是我希望标题执行类似于 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。

下面是它如何工作的一些伪代码：

1. 检查表格是否可见
2. 获取表格中所有thead 部分的列表
3. 反转列表
4. 在数组中查找第一个thead，其顶部位置小于body 元素的scrollTop
5. 如果我们找到一个：
   1. 创建标题的深层副本
   2. 制作容器表
   3. 从原始表中复制属性，以便复制样式
   4. 将容器定位在[0, originalTable.left]
   5. 设置宽度等于原表格的outerWidth
   6. 将找到的每个td的宽度设置为原始表中匹配的td的宽度
   7. 将其添加到 DOM
6. 如果没有找到，则从 DOM 中删除现有容器（如果有的话）

还有一些其他的边缘案例细节也让这变得更好：

• 固定行的原点不是 (0, 0)，而是根据具有固定标题的行下方的 tbody 的“真实”标题行是否应该将其推开来更改。
• 确保在创建新标题行之前删除之前的标题行
• 如果您要创建的标题与已有的相同，请不要重新创建标题行

---

这种方法在我尝试过的其他方法中效果更好，例如尝试position:absolute 一个对象，因为 Firefox 和 IE 在运行 onScroll 处理程序时速度并不快，因此您往往会看到“颤抖”。我还尝试使用theads 的position 属性，这只是以表格列宽跳跃而不匹配数据而告终。

thead 节点不是此解决方案严格要求的，因为您可以使用其他一些选择器来确定哪些行是标题等。

---

更新：添加示例代码和伪代码 更新：Dropbox 更改了他们的系统，将示例替换为 jsfiddle URL