在Firefox和Chrome 58中，<table>中的position:sticky无法正常工作。

Question

1. 打开http://charliepark.org/css-only-sticky-headers/
2. 向下滚动直到看到"The First 40 Elements"表格。
3. 继续向下滚动直到页面底部。

在Chrome 57中，表头会固定在页面顶端，但在Chrome 58中不会。结果发现在Firefox中也没有固定表头。

我不确定这两个浏览器现在是否都有问题，或者是Chrome之前有问题但现在已经修复了。无论如何，正确的方法是什么来使表头固定呢？

- John London

---

对于内部表格框，粘性定位是否已经定义？我非常怀疑，因为任何现有的定位方案也没有被定义。 - BoltClock

他们说：“目前这仅适用于基于WebKit的最新版本浏览器，如Chrome Canary或WebKit Nightly构建版。 （我使用的是Chrome 23.0.1263.1）。希望不久之后更多的浏览器也能支持这个功能。” - Abhishek Pandey

Answer 1

如此说来，Chrome仍然支持表格单元格中的粘性定位，具体可以参考这里。
因此，一个可能的解决办法是将CSS指向th而不是thead。
请参考以下示例：https://jsfiddle.net/owfmwdpm/。

- Daniel Oliveira

---

这对你还管用吗？提供的例子在我的Firefox 49和Chromium 52中都不起作用。 - Taloncor

截至2017年2月，position: sticky;在FF 58.0（64位）中不适用于th。 - Green

Answer 2

回答你的问题：

如何正确地使表头粘性？

最好的方法是使用jquery/javascript和css的组合。

jQuery根据元素在页面上的位置和用户滚动时在视口中的位置，添加/删除一个类来使其粘性。CSS相应地更新其位置属性，当它不是粘性时应用相对定位值，当它是粘性时应用固定定位值。

你提到的那篇文章有一个链接，其中包含示例： https://github.com/kingkool68/stickyHeader

- partypete25

---

去年有人问了一个问题，他在处理旧版浏览器和跨浏览器支持时遇到了问题。https://caniuse.com/#search=sticky - partypete25