具有粘性页眉、页脚、列和可滚动tbody(X和Y)的HTML表

Question

我正在开发HTML表(在React应用程序中(，其中包含一系列粘性元素：页眉、页脚、第一列(我使用position: sticky;使其工作(。表在具有已知尺寸的容器中是封闭的，并允许用户在X和Y方向上滚动(请参阅我的JSFiddlehttps://jsfiddle.net/aypLr936/-这只是实物模型(。目前，我正在尝试"迁移"tbody中的滚动区域(X和Y((类似于https://datatables.net/examples/basic_init/scroll_xy.html)。我尝试过从HTML表中实现100%宽度的解决方案，在tbody中进行垂直滚动，但在我的条件下不起作用。我只是想知道是否有可能在不破坏现有功能的情况下使其工作(表还有一个调整列大小的选项，它必须在更改后工作，可调整大小的列必须溢出父容器[不调整同级列大小](。

我尝试过的另一种方法是将表分为3个：一个用于thead，一个用于tbody，一个为tfoot。但在这种情况下，水平滚动存在问题(ad和tfoot不跟随tbody位置(。也许有什么方法可以在不同的表格滚动位置之间创建链接？

我将非常感谢所有的提示、建议，欢呼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上操作，滚动看起来很流畅。在该解决方案中，标头总是在tbody之上，另一个元素可以是sticky。我注意到的最后一个问题是滚动条的位置，它在极限位置(最大X(产生了微小的位移，但我希望它可以通过一些测量来解决。。。

Answer 2

前几天我看到了你想要的，一个"具有流动高度和宽度、固定页眉、页脚和第一列使用位置的表：粘性"，这是纯css：

https://codepen.io/paulobrien/pen/LBrMxa

Quote:此示例在thead中的第th个元素上使用position:stick，tfoot和左栏实现固定效果。。。将浏览器调整为较小的大小以查看固定的第一列。

我不能复制整支钢笔，所以你必须自己看，让自己独立玩耍。

然后，为了在笔中调整列的大小，只需在规则块的第38-43:行添加调整大小和溢出即可

.table-scroll thead th {
background: #333;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
resize: horizontal; /* add */
overflow: auto; /* add */
}