Javascript 引导表上的粘性列和标题

我一直在研究如何使我的表格标题粘贴在顶部，以及如何使第一列也粘贴在顶部（就像excel上的冻结窗格一样）。我设法找到了一些例子，并以自己的方式实现了它。 结果是这样的

然而，使用这种方法，我有一些问题：

如何设置标题列

，使其与内容

具有相同的宽度

当我使用水平卷轴时，有没有办法让第一列一直贴在左边（就像这样）

---

一般来说，对于您的问题没有简单的解决方案，当然没有一些javascript也是如此

一方面，为了固定第一行（标题），必须指定位置：绝对/固定。 另一方面，如果这样做，则会丢失自动html表宽度分配。这意味着您有两种选择：

• 可以使用固定列宽的表，然后只需将第一行设置为绝对/固定位置
• 或者保持自动表格宽度分配，将第一行设置为固定位置，但丢失标题单元格宽度和正常表格单元格宽度之间的同步，这看起来很糟糕

有许多解决方案和选项可以克服这个恼人的问题，其中一些是你在问题中引用的。您可能还需要检查以下各项：

我最终使用的解决方案是使用两个表，一个用于标题，一个用于内容。为了解决宽度问题，我使用一些jquery动态地从内容表复制宽度值，并将其设置到头表。大概是这样的：

//freeze pane
var updateFreezePane = function() {

    var originTable = $("#original-table-id");
    var tableOffset = originTable.offset().top;
    var tableWidth = originTable.width();
    var $fixedHeader = $("#fixed-header");
    $fixedHeader.css('top',tableOffset + 'px');
    $fixedHeader.width(tableWidth);
    var offset = $(this).scrollTop();
    var $header = $("#original-table-id > thead");

    if (offset > 0) {
        $fixedHeader.show();

        var $fixedHeaderThs = $fixedHeader.find('tr > th');

        //dynamically copy the width of each original th to the fixed header th

        $.each($header.find('tr > th'), function(ind,val){
          var original_width = $(val).width();
          var original_padding = $(val).css("padding");
          $($fixedHeaderThs[ind]).width(original_width);
        });
    }
    else {
        $fixedHeader.hide();
    }
};

$(window).bind("scroll", updateFreezePane);
$(window).bind("resize", updateFreezePane);