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

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: fixedat(0,0)并将其复制到每个标题行列的新列中,并手动将其width属性设置为匹配原始表.

我已经整理了一个概念证明,展示了这一切是如何运作的.

这是一些如何工作的伪代码:

1. 检查表是否可见
2. 获取表格中所有thead部分的列表
3. 翻转清单
4. 找到的第一个thead阵列中的具有顶部位置小于scrollTop所述的body元件
5. 如果我们找到一个:
   1. 创建thead的深层副本
   2. 制作一个容器表
   3. 复制原始表中的属性,以便复制样式
   4. 将容器放在 [0, originalTable.left]
   5. 设置宽度等于outerWidth原始表的宽度
   6. 将每个td找到的宽度设置为td原始表中匹配的宽度
   7. 将其添加到DOM
6. 如果找不到,请从DOM中删除现有容器(如果有)

还有一些其他边缘案例细节也使这更好:

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

position:absolute由于Firefox和IE在运行onScroll处理程序时不会非常快,因此您倾向于看到"抖动",因此这种方法比我尝试过的其他方法更好.我也尝试使用s 的position属性thead,这只是在表格列宽度跳跃而不匹配数据.

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

更新:添加了示例代码和伪代码