javascript - Klistermärken för rubriker behåller inte bredden vid rullning

Jag har några tabellrubriker som jag planerade att göra fasta när användaren scrollar ner på sidan, men de krymper för närvarande när den fasta funktionen aktiveras. Jag skulle vilja att de ärver rubrikernas bredder, men just nu krymper de till textstorleken. Min JS:

$(document).ready(function() {  
var stickyNavTop = $('.th').offset().top;

SOLUTION:

 $(".th th").each(function(){$(this).width($(this).width());});
 $('.th').width($('.th').width());

var stickyNav = function(){  
var scrollTop = $(window).scrollTop();  

if (scrollTop > stickyNavTop) {   
    $('.th').addClass('sticky');  
} else {  
    $('.th').removeClass('sticky');   
}  
};  

stickyNav();  

$(window).scroll(function() {  
    stickyNav();  
});  
});  

Min HTML:

<table class="mGrid" cellspacing="0" rules="all" border="1" id="1"
style="width:98%;border-collapse:collapse;">
  <tr class="th">
    <th scope="col">Membership No.</th>
    <th scope="col">Surname</th>
    <th scope="col">Other Name(s)</th>
  </tr>
  <tr>
    <td>
      <div id="2" class="formInput">
        <label for="2">Membership No.</label>
        <input name="2" type="text" value="AH6973" id="2"
        class="required" style="width:60px;" />
      </div>
    </td>
    <td>
      <div id="3" class="formInput">
        <label for="3">Surname</label>
        <input name="3" type="text" value="CARTER" id="3"
        style="width:100px;" />
      </div>
    </td>
    <td>
      <div id="4" class="formInput">
        <label for="4">Other Name(s)</label>
        <input name="4" type="text" value="RAYMOND" id="4"
        style="width:150px;" />
      </div>
    </td>
  </tr>
</table>

min CSS:

.sticky {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
    border-top: 0;
    color: #fff !important;
    background: #666;
    border-left: solid 1px #525252;
    font-size: 1.0em;
}

(Detta är modellerat för att vara samma som rubrikstilen, det är bara att bredden krymper för att passa textens bredd för tillfället. Jag försökte redigera rubrikstilen men den är tydligen skrivskyddad "'HeaderStyle' egenskapen är skrivskyddad och kan inte ändras."

Svar #1

Lägg bara till den här raden innan din funktionsdefinition:

$('th').width($('th').width());

Fullständig JavaScript-kod:

$(document).ready(function() {  
    var stickyNavTop = $('.th').offset().top;  

    $('th').width($('th').width());

    var stickyNav = function(){  
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {   
            $('.th').addClass('sticky');  
        } else {  
            $('.th').removeClass('sticky');   
        }  
    };  

    stickyNav();  

    $(window).scroll(function() {  
        stickyNav();  
    });  
});

Svar #2

här är en vanlig lösning, den upptäcker automatiskt varje sub-elements bredd och höjd och speglar vid scrollning, det är något i stil med följande:

var $this = $(this),
      top = $this.offset().top,
      left = $this.offset().left,
      width = $this.width(),
      height = $this.height(),
      widthArr = [],
      heightArr = [];
    $this.find("*").each(function(i, e) {
      widthArr.push($(this).width());
      heightArr.push($(this).height());
    });

$(window).scroll(function() {
  if($(window).scrollTop() >= top) {
    $this.css({
      position: "fixed",
      top: 0,
      left: left,
      "z-index": 100,
      width: width,
      height: height
    });

    $this.find("*").each(function(i, e) {
      $(this).width(widthArr[i]);
      $(this).height(heightArr[i]);
    });
  } else {
      // to be implemented
  }
});