3

I am using this plugin to achieve a sticky Table Header in my Table. Actually as in the plugin example and in my page, the table Header disappear a bit later the last row in the table. I want my table header disappearing exactly when the last row is gone.There is a chance to achieve that?

4

5 回答 5

4

这是一个工作示例：小提琴

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

if ((scrollTop > offset.top) && (scrollTop < offset.top + $this.height()-base.$clonedHeader.height())) {
于 2012-09-13T12:12:23.327 回答
2

这可以通过 div 表来实现。

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

看看这个jsfiddle的简单例子。

编辑：

直觉使您看起来需要添加

position: sticky;

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

于 2019-07-16T17:19:42.720 回答
1

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

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

于 2012-09-13T12:00:22.703 回答
1

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

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

我做了一些更改，以帮助计算基于第一个 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++;
});
于 2013-09-12T03:02:53.790 回答
0

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

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

https://github.com/doska80/ScrollTableFixed

于 2016-01-05T15:00:19.900 回答