如何创建粘性，可滚动的HTML表格

Question

我想创建一个HTML表格，其中

• 表格内容可在x和y方向滚动
• 第一行粘贴到顶部
• 第一列位于左侧粘性
• 并且所有单元格可能根据其内容具有不同的高度

实施例

网上有很多例子，它们满足上面的一些要求，但不满足最后的要求。

我的方法

1。滚动容器

我使用overflow: scroll和固定尺寸来创建可滚动容器

2。 ＆安培; 3.同步细胞高度

我尝试使用css技巧中的flex table来同步单元格的高度。

2。修复单元格

除此之外，我用css变换修复了单元格。 在每个滚动事件中，我根据滚动位置重新定位每个固定单元格。 这种方法显然非常滞后。 我没有使用position: fixed;，因为这会从溢出区域中分离出单元格。

演示：http://codepen.io/anon/pen/mREpPe?editors=0100

Answer 1

我最近不得不解决这个问题。我发现什么都没符合我的要求，所以我自己写了。

这不是一个微不足道的代码，所以有点太大了，不能在这里发布，但你可以查看/翻录here

水平滚动是无限的，因此您需要使用光标键。可能会给你一个很好的起点吗？