Why is div.tablesorter-sticky-wrapper left setting always zero?

Question

I am using tablesorter version 2.18.2 and the stickyHeaders widget here:

http://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html

When the stickyHeader appears on the screen it is positioned absolute and left is always zero. My table is not at position zero so the stickyHeader appears in the wrong place.

Shouldn't the left setting be the left position of the table? Is this a bug?

I tried the cssStickyHeaders widget and it correctly positions the stickyHeader but does not offer a z-index option. I need to set the z-index to 4 so the header appears on top of the controls within the table.

Answer 1

The widget is designed to add the table left position, left margin & padding to align the cloned header. If you need to modify the z-index, the stickyHeaders_zIndex option is available.

The widget should work as-is. I created this demo with the table set to float right and it lines up correctly.

I believe the issue you are encountering is when the stickyHeaders_attachTo option is used to attach the clone to the table wrapper (demo)

$(function () {
    $('table').tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'stickyHeaders'],
        widgetOptions: {
            stickyHeaders_attachTo: $('#wrapper'),
            stickyHeaders_yScroll: $(window),
            stickyHeaders_zIndex: 2
        }
    });
});

The solution is to add a position: relative to the wrapper (demo)