title: How to use tablesorter stickyheaders widget - not working?
body: <p>I'm having problems trying to implement the stickyHeaders widget as part of the tablesorter plugin. I've followed the instructions per tutorials that I've managed to find through Stackoverflow and other sites but nothing seems to work.</p>
  
  <p>Here's my <strong>header</strong> code: </p>
  
  <pre><code>&lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  
  &lt;title&gt; Sales Report &lt;/title&gt;
  &lt;link href="admin_style.css" rel="stylesheet" type="text/css"&gt;
  
      &lt;!-- jQuery: required (tablesorter works with jQuery 1.2.3+) --&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;link href="tablesorter/css/theme.dropbox.css" rel="stylesheet"&gt;    
      &lt;script src="tablesorter/js/jquery.tablesorter.min.js"&gt;&lt;/script&gt;
      &lt;script src="tablesorter/js/jquery.tablesorter.widgets.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      $(function(){
          $('table').tablesorter({
              widgets        : ['zebra', 'columns', 'stickyHeaders'],
              usNumberFormat : false,
              sortReset      : true,
              sortRestart    : true
          });
      });
      &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p><strong>BODY HTML</strong></p>
  
  <pre><code>&lt;table id="table" class="tablesorter-dropbox" border="0" cellpadding="4" cellspacing="0"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
              &lt;th align="center" valign="top"&gt;Brand&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;Bawtry  Mens&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;£&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;Bawtry Ladies&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;£&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;Bawtry Total&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;£&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;Chain Mens&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;£&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;Chain Ladies&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;£&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;Chain Total&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;£&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;Internet Mens&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;£&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;Internet Ladies&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;£&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;Internet Total&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;£&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;Total&lt;/th&gt;
              &lt;th align="center" valign="top"&gt; £&lt;/th&gt;
              &lt;th align="center" valign="top"&gt;Average&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr&gt;
  
          &lt;!-- Table body contents --&gt;
  </code></pre>
  
  <p>At the moment this displays the table with the default theme but the header doesn't stay fixed when scrolling down the page. </p>
  
  <p>Any help would be appreciated. </p>
  
  <p>Thanks.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I have it working in a fiddle - see here <a href="http://jsfiddle.net/4mVfu/3386/" rel="nofollow">http://jsfiddle.net/4mVfu/3386/</a></p>
  
  <p>But once I add the same code to my page and run in XAMPP it doesn't work. I'm really not sure what's happening error-wise?</p>