如何仅使用 CSS 冻结 THEAD？答案

【问题标题】：How can I freeze THEAD with CSS only?如何仅使用 CSS 冻结 THEAD？
【发布时间】：2014-02-22 22:06:52
【问题描述】：

我正在尝试冻结表格的 THEAD 部分，以便在滚动时，THEAD 始终可见。我通过将事件处理程序附加到 jQuery 中的 scroll 事件来实现这一点，该事件将 THEAD 的 top 位置设置为滚动偏移：

$(".scroll").scroll(function () {
    $("#header thead").css({"top": ($(".scroll").scrollTop()) + "px"});
});

你可以在FIDDLE看到它的实际效果

【问题讨论】：

不能单独使用CSS，因为它是用于样式的，无法检测滚动位置，这就是为什么您需要Javascript来检测何时有一定数量的滚动。
CSS-Only Scrollable Table with fixed headers的可能重复
你能详细说明你想要达到什么目标吗？我真的不明白“每次滚动时刷新标题”的意思
不幸的是，唯一真正好的 CSS 解决方案还有很长的路要走：charliepark.org/css-only-sticky-headers

标签： jquery html css

【解决方案1】：

最丑的替代解决方案，至少没有 js 并且大多数浏览器都支持（没有 css3）。 Jsfiddle 基本上它duplicate 表格，设置第一个表格标题仅在第二个表格顶部可见。缺点是，因为它使用的是固定位置，它不会像表格那样水平滚动。也许如果您将表格宽度设置为与窗口宽度相同，它应该可以正常工作。只是一种选择

【讨论】：

ty for the comment...但是以这种方式标题的水平滚动似乎不起作用
是的，它对浏览器窗口有固定的位置。尝试将 js 小提琴调整为更宽的屏幕或调整表格大小以适合浏览器窗口。我正在使用 1920px 宽度的监视器，如果我将 jsfiddle 窗口拉伸到最宽的宽度，则所有数据都可以正确显示而无需水平滚动
是的，但我需要当我在小显示器上看到时，它可以正确看到，即使有水平溢出栏
那么使用一些js是你唯一的解决方案。您可以在 google 中找到许多好的 jquery 插件或 js sn-p。他们也不会修改内容（就像我对复制表所做的那样）
我试过搜索，但我发现它似乎将标题固定到页面顶部.. 不是一个 div ......反正你的答案！