<table> 中的置顶位置在 Firefox 和 Chrome 58 中不起作用答案

【问题标题】：Position sticky in <table> does not work in Firefox and Chrome 58<table> 中的置顶位置在 Firefox 和 Chrome 58 中不起作用
【发布时间】：2017-06-09 01:10:01
【问题描述】：

转到http://charliepark.org/css-only-sticky-headers/
向下滚动直到“前 40 个元素”表格可见。
继续向下滚动直到页面末尾。

在 Chrome 57 中，表格标题会保留，但对于 Chrome 58 则不会。事实证明它在 Firefox 中也不会保留。

我不确定现在这两个浏览器是否都错了，或者是 Chrome 错了但现在正确了。无论哪种方式，使表头具有粘性的正确方法是什么？

【问题讨论】：

是否为内部表格框定义了粘性定位？我非常怀疑它，考虑到没有现有的定位方案也被定义。
他们说 “这只适用于（目前）基于 WebKit 的浏览器的最新版本，例如 Chrome Canary 或 WebKit Nightly 版本。（我在 Chrome 上23.0.1263.1)。希望不久之后会有更多浏览器支持此功能。”.

标签： html css google-chrome firefox

【解决方案1】：

就像here 所说，Chrome 仍然支持在表格单元格中粘贴位置。
因此，一种可能的解决方法是将 CSS 指向 th 而不是 thead。
请看这个示例：https://jsfiddle.net/owfmwdpm/

【讨论】：

这仍然对您有用吗？提供的示例在 Firefox 49 和 Chromium 52 中都不适用于我。
在 FF 中不起作用。截至 2017 年 2 月，position: sticky; th 在 FF 中不起作用 58.0 (64-bit)

【解决方案2】：

所以回答你的问题：

什么是使表头变粘的正确方法？

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

jQuery 根据用户滚动时在页面上和视口中的位置，从您想要使其具有粘性的元素中添加/删除一个类。 css 相应地更新它的位置属性，当它不粘时应用位置值relative，当它粘时应用fixed。

您提到的那篇文章有一个示例链接： https://github.com/kingkool68/stickyHeader

【讨论】：

@Green 去年有人问过这个问题，这个人在使用旧浏览器版本和跨浏览器支持时遇到了问题。 caniuse.com/#search=sticky