Jquery Tablesorter with stickyheaders

I am using TableSorter Version 2.28.1. I am using .net with master pages.

I added "StickyHeaders" to my dot net Gridview and it works great. However, I need to make it work like the second table in the example found at https://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html

I was not able to get it to work. I added this to my code ...

widgets: ['zebra', 'StickyHeaders'],
widgetOptions: {
	stickyHeaders_attachTo: '.wrapper' 
}

I put the gridview inside a asp:panel with scroll bars. It scrolls but the header does not stick. Is there an example of the html (or aspx) of what you did to get the scroll bars around the table and make the headers stick?

--- Updated 01/08/2018 ---
@Mottie I am updating this post so I can post my findings easier. I have no padding/margins on my wrapper div. What I noticed is that div for the sticky header gets a Left position of whats in the .wrapper class.

<DIV class="tablesorter-sticky-wrapper tablesorter-sticky-visible" style="WIDTH: 1076px; POSITION: absolute; LEFT: 5px; Z-INDEX: 2; TOP: 96px; VISIBILITY: visible">

The padding in my .wrapper class looks like this "padding: 0px 5px;".

If I fool around with the left (in i.e. developer tools) and increase it to 25px, then it gets aligned. But if I change the .wrapper class to .25px it is still off because the whole table moves to the left.

Is there a way to adjust the Left position of the sticky header separate from the padding in the .wrapper class?

Solution

I found the problem. The Table had a width of 98% (this was to line it up with a DIV above it). Once I removed the width on the table then the sticky headers worked great.