title: Sticky headers not maintaining width when scrolling
body: <p>I have some table headers which I planned on making sticky (fixed) as the user scrolls down the page, but they currently shrink when the sticky is activated, I would like them to inherit the widths of the headers, but they shrink to the size of the text at the moment. 
  My JS:</p>
  
  <pre><code>$(document).ready(function() {  
  var stickyNavTop = $('.th').offset().top;
  </code></pre>
  
  <p><code>SOLUTION:</code></p>
  
  <pre><code> $(".th th").each(function(){$(this).width($(this).width());});
   $('.th').width($('.th').width());
  
  var stickyNav = function(){  
  var scrollTop = $(window).scrollTop();  
  
  if (scrollTop &gt; stickyNavTop) {   
      $('.th').addClass('sticky');  
  } else {  
      $('.th').removeClass('sticky');   
  }  
  };  
  
  stickyNav();  
  
  $(window).scroll(function() {  
      stickyNav();  
  });  
  });  
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;table class="mGrid" cellspacing="0" rules="all" border="1" id="1"
  style="width:98%;border-collapse:collapse;"&gt;
    &lt;tr class="th"&gt;
      &lt;th scope="col"&gt;Membership No.&lt;/th&gt;
      &lt;th scope="col"&gt;Surname&lt;/th&gt;
      &lt;th scope="col"&gt;Other Name(s)&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;div id="2" class="formInput"&gt;
          &lt;label for="2"&gt;Membership No.&lt;/label&gt;
          &lt;input name="2" type="text" value="AH6973" id="2"
          class="required" style="width:60px;" /&gt;
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;div id="3" class="formInput"&gt;
          &lt;label for="3"&gt;Surname&lt;/label&gt;
          &lt;input name="3" type="text" value="CARTER" id="3"
          style="width:100px;" /&gt;
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;div id="4" class="formInput"&gt;
          &lt;label for="4"&gt;Other Name(s)&lt;/label&gt;
          &lt;input name="4" type="text" value="RAYMOND" id="4"
          style="width:150px;" /&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>my CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>(This is modelled to be the same as the header style, it's just the width shrinks to fit the width of the text at the moment. I tried to edit the header style but it's apparently read-only  <code>"'HeaderStyle' property is read-only and cannot be set."</code></p>