javascript - 如何保持绝对定位在流程中并与表格标题对齐的表格单元格

Question

我正在尝试使用 this tutorial允许在我编写的矩阵小部件上高效滚动。但是，它在它创建的无限滚动节点上使用绝对定位。我的节点是表格行和列。这会将所有单元格从表流中取出。有没有办法让绝对定位的表格单元格保持流动？

我确实知道可以绝对定位一个 div 并使用外部 div 上的相对定位使其与环绕它的另一个 div 保持一致。像这样的东西:

<div style="position:relative"><div style="position:absolute;top:0;left:0"></div></div>

但是，由于外部 html 是带有标题的表体而内部 html 是表行，因此在这种情况下这将不起作用。有什么方法可以将相对定位应用于表格的一部分以强制绝对定位的表格单元格留在表格内并与表格标题保持对齐？

我已经尝试在围绕绝对定位行的表格的各个部分应用相对定位，例如:

<table border="1">
  <thead><tr><th>header</th><th>another header</th></tr></thead>
    <tbody style="position:relative">
       
       <tr style="position:absolute">
          <td><input type="checkbox"/></td>
          <td><input type="checkbox"/></td>
       </tr>
       <tr style="position:absolute">
          <td><input type="checkbox"/></td>
          <td><input type="checkbox"/></td>
       </tr>
    </tbody>
</table>

是否可以修改上面的代码片段，使单元格与 thead 部分和表格的其余部分保持一致？适用于 div 的相同相对定位技巧似乎不适用于表格内容。

Answer 1

我认为clusterize.js可能会为您提供解决问题的方法，因为它可以很好地处理表格。