Sticky Table Headers

Question

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?

Answer 1

here's a working example: fiddle

all I changed was the end of this line:

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

Answer 2

This can be achieved with div tables.

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

Check out this jsfiddle for simple example.

Edit:

Intuition makes it seem like you need to add

position: sticky;

once to the table-row but that is not the case. It has to be added to each table-cell that's supposed to be a header cell and that will do the trick.

Answer 3

You could add a bug report on github:

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

Answer 4

I know this is old, but I felt like contributing something that may help some...

For dynamic tables (where the width for each cell is pre-computed), this plugin messes up the widths for the header row.

I made a few changes that help compute the width based on each outerWidth from the cells based on the first tbody row.

First comment out the current width calculations in the plugin:

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

Then add the following to the end of 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 5

I wrote a jquery library that makes the table be fixed at the top of the page and disappearing exactly when the last row is gone

This is a small jquery library functions combined with ScrollFix https://github.com/ShiraNai7/jquery-scrollfix library to provide a header table fixed below the main menu. the library supports several tables on the same page

https://github.com/doska80/ScrollTableFixed