javascript - 带有粘性页眉、页脚、列和可滚动主体(X 和 Y)的 HTML 表格

Question

我正在开发具有一系列粘性元素的 HTML 表格(在 React 应用程序内):页眉、页脚、第一列(我正在使用 position: sticky; 使其工作)。表格在已知尺寸的容器内关闭，并允许用户在 X 和 Y 方向滚动(请参阅我的 JSFiddle https://jsfiddle.net/aypLr936/ - 这只是模型)。目前我正在尝试“迁移”tbody 内的滚动区域(X 和 Y)(类似于 https://datatables.net/examples/basic_init/scroll_xy.html )。我尝试实现来自 HTML table with 100% width, with vertical scroll inside tbody 的解决方案但它在我的条件下不起作用。我只是想知道是否有可能让它工作而不破坏现有功能(表还有一个调整列大小的选项，它必须在更改后工作，可调整大小的列必须溢出父容器[不调整兄弟列的大小]).

我尝试的另一种方法是将表格分成 3 个:一个用于 thead，一个用于 tbody，一个用于 tfoot。但在这种情况下，水平滚动存在问题(头部和 footer 不跟随 body 位置)。也许有什么办法可以在不同的表格滚动位置之间建立联系？

我将非常感谢所有提示、建议、 干杯 J.

Answer 1

更新:我找到了目前令我满意的解决方案。实际上有一种方法可以创建两个带有表格部分的单独 div 并通过滚动位置将它们耦合(可以通过纯 JS 完成)。我认为这是与 https://datatables.net/examples/basic_init/scroll_xy.html 类似的解决方案.我开发了这样的东西(在我的 React 应用程序中):

<div id="thead_scroll" style={{overflowX: 'hidden'}}>
  <table>
    <thead> 
       ...
    </thead>
  </table>
</div>
<div id="tbody_scroll" style={{overflowX: 'auto', maxHeight: 500}} onScroll={this.handleBodyScroll}>
  <table>
    <tbody> 
       ...
    </tbody>
  </table>
</div>

事件是这样处理的:

handleBodyScroll(event) {
  const tbody = document.getElementById('tbody_scroll');
  const thead = document.getElementById('thead_scroll');
  thead.scrollLeft = tbody.scrollLeft;
}

我们直接在 DOM 上操作，滚动看起来很流畅。在这个解决方案中，header 总是在 tbody 之上，另一个元素可能是 sticky。我注意到的最后一个问题是滚动条位置，它在极端位置(最大 X)产生了微小的位移，但我希望它可以通过一些测量来解决......