Question

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

然而，通过这种方法，我遇到了一些问题：

如何设置标题列<th>，使其与内容<td>的宽度相同？
当我使用水平滚动时，是否总是让第一列粘在左侧（就像here一样）？

Answer 1

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

一方面，为了使第一行（标题）固定，你必须指定position：absolute / fixed。另一方面，如果这样做，则会丢失自动html表格宽度分配。这意味着您有两个选择：

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

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

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);

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

1 个答案: