粘性表格标题答案

【问题标题】：Sticky Table Headers粘性表格标题
【发布时间】：2012-09-13 11:56:37
【问题描述】：

我正在使用这个plugin 在我的Table 中实现一个粘性表头。实际上，就像在插件示例和我的页面中一样，表 Header 稍后会在表中的最后一行消失。我希望我的表头在最后一行消失时消失。有机会实现吗？

【问题讨论】：

【解决方案1】：

这是一个工作示例：fiddle

我改变的只是这一行的结尾：

if ((scrollTop > offset.top) && (scrollTop < offset.top + $this.height()-base.$clonedHeader.height())) {

【讨论】：

你应该创建一个pull request
嘿 vonflow，我想你说得对，你能更好地解释一下你是在哪一行解决的吗？我只是简单地在 Jsfiddle 中粘贴和复制了代码，它似乎也在我的项目中工作。我将在 github 上提出拉取请求，提及你的名字。谢谢
其实我只是想出了如何做拉取请求，所以我正准备把它放进去。
很酷，我会在 github 上等待你的解释。完成后告诉我
其实没什么大不了的，只是在决定是否隐藏的时候，会计算header的高度。

【解决方案2】：

这可以通过 div 表来实现。

.td.header {
  position: sticky;
  top:0px;
}

看看这个jsfiddle的简单例子。

编辑：

直觉让你觉得你需要添加

position: sticky;

一次到表行，但事实并非如此。它必须添加到每个应该是标题单元格的表格单元格中，这样就可以了。

【讨论】：

【解决方案3】：

您可以在 github 上添加错误报告：

https://github.com/jmosbech/StickyTableHeaders/issues

【讨论】：

谢谢，我想我必须更换插件，我不能依赖这个，我不能自己修复它

【解决方案4】：

我知道这已经过时了，但我想贡献一些可能对某些人有所帮助的东西......

对于动态表格（每个单元格的宽度是预先计算好的），这个插件会弄乱标题行的宽度。

我做了一些更改，以帮助根据第一个 tbody 行的单元格中的每个 outerWidth 计算宽度。

先注释掉插件中当前的宽度计算：

base.updateWidth = function () {
        // Copy cell widths and classes from original header
        $('th', base.$clonedHeader).each(function (index) {
            var $this = $(this);
            var $origCell = $('th', base.$originalHeader).eq(index);
            this.className = $origCell.attr('class') || '';
            //$this.css('width', $origCell.width());
        });

        // Copy row width from whole table
        //base.$clonedHeader.css('width', base.$originalHeader.width());
    };

    // Run initializer
    base.init();

然后在base.toggleHeaders = function() {

的末尾添加以下内容

// Set cell widths for header cells based on first row's cells
var firstTr = $this.children("tbody").children("tr").first();
var iCol = 0;
$(firstTr).children("td:visible").each(function() 
{
    var colWidth = $(this).outerWidth();
    console.log(colWidth.toString());
    var headerCell = $this.children("thead.tableFloatingHeader").children("tr").children("th:eq(" + iCol + ")");
    var firstRowCell = $this.children("tbody").children("tr:first").children("td:eq(" + iCol + ")");
    $(headerCell).outerWidth(colWidth);
    $(firstRowCell).outerWidth(colWidth);

    iCol++;
});

【讨论】：

【解决方案5】：

我写了一个 jquery 库，它使表格固定在页面顶部，并在最后一行消失时消失

这是一个小型jquery库函数结合ScrollFixhttps://github.com/ShiraNai7/jquery-scrollfix库提供一个固定在主菜单下方的表头。该库支持同一页面上的多个表

https://github.com/doska80/ScrollTableFixed

【讨论】：