在Firefox和Safari中具有显示网格作用的位置粘性水平滚动

Question

我正在尝试在React中创建一个可重用的Table组件，该组件具有带有display: grid和position: sticky的粘性列（在水平滚动时）。

我在Chrome中启动了实现，所有功能均按预期运行，因此我检查了Firefox和Safari组件在此处的工作方式。不幸的是，Firefox和Safari无法像Chrome一样处理position: sticky。

---

示例：

为了简洁起见，这里是Codepen，可以在其中检查问题。

---

我发现的内容：

为了进行测试，我将表的第一和最后两列设置为粘性。我发现，Firefox将最后两列的th和td元素呈现为position: absolute。每当我将表格大小调整为较小的宽度时，表格的scrollWidth （应为列的所有width）的总和和clientWidth （应为table元素的width）] > 在Firefox上是相同的和在Chrome上是不同的值。例如：

// Firefox & Safari
table.scrollWidh = 657
table.clientWidth = 657

// Chrome
table.scrollWidth = 800
table.clientWidth = 657
TBH，我不确定我是同时发现Firefox和Safari中的错误还是现在应该信任哪个浏览器。也许我的实现中缺少CSS属性。

您遇到了这个吗？如果我错过了什么，您有提示吗？

我正在尝试在React中创建一个可重用的Table组件，该组件具有粘性列（在水平滚动时），显示：网格和位置：粘性。我从Chrome开始实施，其中...

Answer 1

最后，我能够解决问题。该解决方案需要对JS进行一些修改。