Question

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

Answer 1

这是一个有效的例子：fiddle

我所改变的就是这一行的结尾：

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

Answer 2

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

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

Answer 3

我知道这已经过时了，但我觉得有些东西可以帮助一些......

对于动态表（预先计算每个单元格的宽度），此插件会混淆标题行的宽度。

我做了一些更改，根据第一个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++;
});

Answer 4

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

这是一个与ScrollFix https://github.com/ShiraNai7/jquery-scrollfix库结合的小型jquery库函数，用于提供固定在主菜单下方的标题表。该库支持同一页面上的几个表

https://github.com/doska80/ScrollTableFixed

Answer 5

这可以通过div表来实现。

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

请查看此jsfiddle以获取简单示例。

粘表标题

5 个答案: