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。但是在这种情况下，水平滚动会出现问题（脚和脚不跟着身体的位置）。也许有什么办法可以在不同的表格滚动位置之间建立联系？

我将非常感谢所有提示，建议，干杯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。我注意到的最后一个问题是滚动条位置，该滚动条位置在极限位置（max X）会产生较小的位移，但是我希望可以通过一些测量来解决...

Answer 2

前几天，我确切地看到了您想要的东西，一个纯css的“带有高度和宽度的表格，固定的页眉，页脚和第一列，使用position：sticky”。

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

引用：此示例在thead中的th个元素上使用position：sticky，脚和左立柱达到固定的效果。 ...调整浏览器的尺寸使其更小，以查看固定的第一列。

我无法复制整支笔，所以您必须自己看一下，并自己动手玩。

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

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

HTML表带有粘性页眉，页脚，列和可滚动的正文（X和Y）

2 个答案: