引导表上的粘性列和标题

Question

我一直在寻找如何让我的表头贴在顶部以及如何让第一列也贴在上面（就像 excel 上的冻结窗格一样）。我设法找到了一些示例here 和here 并以我自己的方式实现它。 结果是这样的https://jsfiddle.net/Lz1rujc1/2/

但是，使用这种方法我有一些问题：

1. 如何设置标题列<th>，使其与内容<td>的宽度相同？
2. 当我使用水平滚动时，有没有办法让第一列一直粘在左侧（就像here）？

Answer 1

一般来说，你的问题没有简单的解决方案，当然不是没有一些javascript。

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

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

有许多解决方案和选项可以解决这个烦人的问题，其中一些是您在问题中引用的。您可能还想检查这些：

http://www.fixedheadertable.com/

how do I create an HTML table with fixed/frozen left column and scrollable body?

我最终使用的解决方案是使用 2 个表格，一个用于标题，一个用于内容。为了解决宽度问题，我使用了一些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);