带有粘性页眉、页脚、列和可滚动 tbody（X 和 Y）的 HTML 表格答案

【问题标题】：HTML table with sticky header, footer, column AND scrollable tbody (X and Y)带有粘性页眉、页脚、列和可滚动 tbody（X 和 Y）的 HTML 表格
【发布时间】：2019-05-15 17:10:05
【问题描述】：

我正在开发带有一系列粘性元素的 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。但在这种情况下，水平滚动存在问题（thead 和 tfoot 不跟随 tbody 位置）。也许有什么方法可以在不同的表格滚动位置之间创建链接？

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

【问题讨论】：

HTML+CSS <table> with fixed <thead> and scrollable <tbody>的可能重复
使用插件 - datatables.net 非常适合这种事情，但你也需要 jquery
@Pete 是的，这很好，我把它作为参考，但是我的 React 应用程序中有一些额外的功能无法移动到外部插件。
@Viira 在给定示例中 X 方向滚动存在问题（列不会溢出父容器，它们正在调整兄弟元素的大小）

标签： javascript html css reactjs

【解决方案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）产生微小的位移，但我希望它可以通过一些测量来解决......

【讨论】：

【解决方案2】：

前几天我看到了你想要的，一个“具有可变高度和宽度的表格，使用 position:sticky 固定页眉、页脚和第一列”，它是纯 css：

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

Quote: 这个例子在thead中的第th个元素上使用了position:sticky， tfoot 和左列达到固定的效果。 ... 调整浏览器的大小以查看固定的第一列。

我无法复制整支钢笔，所以你必须自己看，然后让你自己独立玩。

然后，要在该笔中调整列大小，只需在此规则块的第 38 - 43 行添加调整大小和溢出：

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

【讨论】：