Tablesorter Sticky Headers

Shows scrolling wrapper horizontally with sticky headers doesn't scroll header horizontally as well

by Bianca Kuehweidner

HTML

<link rel="stylesheet" href="https://rawgit.com/Mottie/tablesorter/master/css/theme.blue.css">
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-stickyHeaders.js"></script>
<div class="wrapper">
  <table class="tablesorter">
    <thead>
      <tr>
        <th>AlphaNumeric</th>
        <th>Numeric</th>
        <th>Animals</th>
        <th>Sites</th>
        <th>AlphaNumeric</th>
        <th>Numeric</th>
        <th>Animals</th>
        <th>Sites</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>abc 123</td>
        <td>10</td>
        <td>Koala</td>
        <td>http://www.google.com</td>
        <td>abc 123</td>
        <td>10</td>
        <td>Koala</td>
        <td>http://www.google.com</td>
      </tr>
      <tr>
        <td>abc 1</td>
        <td>234</td>
        <td>Ox</td>
        <td>http://www.yahoo.com</td>
        <td>abc 1</td>
        <td>234</td>
        <td>Ox</td>
        <td>http://www.yahoo.com</td>
      </tr>
      <tr>
        <td>abc 9</td>
        <td>10</td>
        <td>Girafee</td>
        <td>http://www.facebook.com</td>
        <td>abc 9</td>
        <td>10</td>
        <td>Girafee</td>
        <td>http://www.facebook.com</td>
      </tr>
      <tr>
        <td>zyx 24</td>
        <td>767</td>
        <td>Bison</td>
        <td>http://www.whitehouse.gov/</td>
        <td>zyx 24</td>
        <td>767</td>
        <td>Bison</td>
        <td>http://www.whitehouse.gov/</td>
      </tr>
      <tr>
        <td>abc 11</td>
        <td>3</td>
        <td>Chimp</td>
        <td>http://www.ucla.edu/</td>
        <td>abc 11</td>
        <td>3</td>
        <td>Chimp</td>
        <td>http://www.ucla.edu/</td>
      </tr>
      <tr>
        <td>abc 2</td>
        <td>56</td>
        <td>Elephant</td>
        <td>http://www.wikipedia.org/</td>
        <td>abc 2</td>
        <td>56</td>
        <td>Elephant</td>
       ...

CSS

.wrapper {
  overflow-y: auto;
  height: 200px;
}

JavaScript

$('table').tablesorter({
  theme: 'blue',
  widgets: ['stickyHeaders'],
  widgetOptions: {
  	stickyHeaders_xScroll : '.wrapper'
  }
});