javascript - 滚动时锁定表格标题 (ColResizable)

Question

我对 HTML、CSS 和 Javascript 不是很熟悉，但我的任务是创建一个表格系统，该系统将允许用户调整表格列的大小，但也将标题固定在表格显示部分的顶部在用户滚动表格时。

我知道这听起来很困惑，所以我创建了一个 Fiddle，它可以准确地表示我当前拥有的内容，并希望它需要更新的地方。

我决定使用在这里找到的插件 JSColResizable: http://www.bacubacu.com/colresizable/并将其设置在 fiddle 中，允许调整表格的大小。我还将表格包裹在一个只允许随时显示 300px 高度的 div 中。

当用户将鼠标悬停在表格分区上并向下滚动时，表格标题会滚动到分区之外，这让用户很难区分哪一列是什么。我只需要表格条目继续以相同的方式工作并滚动到 div 之外，但允许标题在 div 的顶部保持静态，以便它们可以更轻松地与列相关。

如果有人遇到过此问题，我将不胜感激。

Answer 1

你必须为它写一点jquery，在css中写一个class

这是 Working Fiddle 你想要的。

我已经为它编写了一些 jQuery 代码，您可以使用它。

jQuery

$(function(){
$.fn.fixMe = function () {
    return this.each(function () {
        var $this = $(this),
           $t_fixed;
        function init() {
            $this.wrap('<div class="container" />');
            $t_fixed = $this.clone();
            $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
            resizeFixed();
        }
        function resizeFixed() {
            $t_fixed.find("th").each(function (index) {
                $(this).css("width", $this.find("th").eq(index).innerWidth() + "px");
            });
        }
        function scrollFixed() {
            var offset = $(this).scrollTop(),
            tableOffsetTop = $this.offset().top,
            tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
            if (offset < tableOffsetTop || offset > tableOffsetBottom) {
                $t_fixed.hide();
            }
            else if (offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden")) {
                $t_fixed.show();
            }
            var tboffBottom = (parseInt(tableOffsetBottom) );
            var tboffTop = (parseInt(tableOffsetTop));

            if (offset >= tboffBottom && offset <= tableOffsetBottom) {
                $t_fixed.find("th").each(function (index) {
                    $(this).css("width", $this.find("th").eq(index).outerWidth() + "px");
                });
            }
        }
        $(window).resize(resizeFixed);
        $(window).scroll(scrollFixed);
        init();
    });
};

$("table").fixMe();
});

希望对你有帮助。