Applying Sticky JS Plugin To A Table Header

I am applying the sticky js plugin to a data table so that the table header sticks to the top of the browser window as the user scrolls down the page. The header becomes sticky as you scroll down, however, the td widths change in the table body and the td widths in the header don’t match. Looks like it might be due to the js changing the display type for the thead element?

I have attached a screenshot that has the cell borders outlined.

Hoping that someone might be able to shed some light on how to solve this issue. The code structure I am using is as below.

<div id="stock-control-table" class="stock-control-table">
  <table class="default-table" data-sticky-container>
     <thead class="sticky" data-sticky data-top-anchor="stock-control-start:top" data-btm-anchor="stock-control-end">
       <tr class="stock-control-table-heading">
          <!--table header content -->
   <tbody id="stock-control-start">
        <!--table content -->
 <p id="stock-control-end" class="help-text"> </p>

Afaik this is a known problem with tables in general. You might have to set fixed widths or calculate them.