title: Table scroll with fixed first column
body: <p>I'm trying to get the table to scroll left/right on button click keeping the first column in it's place.
  My data is all in one table so I can't create two tables instead of one. Is there any way of doing this? See fiddle below.</p>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function() {
    $("#right").on("click", function() {
      var position = $("table").position();
      $("table").animate({
        left: position.left - 200
      }, 800);
    });
  });
  $("#left").on("click", function() {
  var position = $("table").position();
   $("table").animate({
     left: position.left + 200
   }, 800);
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#table-wrapper {
  width: 95%;
  float: left;
  overflow-x: scroll;
  background: #ddd;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>table {
   background: #fff;
   width: 1200px;
   text-align:center;
   overflow: hidden;
   position:relative;
  }
  table thead tr th:first-child,
  table tbody tr td:first-child {
   background: yellow;
   top: auto;
   left: 0.5;
   position: absolute;
   width: 6em;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button id="left"&gt;&amp;larr;&lt;/button&gt;
  &lt;button id="right"&gt;&amp;rarr;&lt;/button&gt;
  
  &lt;div id="table-wrapper"&gt;
    &lt;table border="1"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Heading1&lt;/th&gt;
          &lt;th&gt;Heading2&lt;/th&gt;
          &lt;th&gt;Heading3&lt;/th&gt;
          &lt;th&gt;Heading4&lt;/th&gt;
          &lt;th&gt;Heading5&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;13&lt;/td&gt;
          &lt;td&gt;14&lt;/td&gt;
          &lt;td&gt;15&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;22&lt;/td&gt;
          &lt;td&gt;23&lt;/td&gt;
          &lt;td&gt;24&lt;/td&gt;
          &lt;td&gt;25&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;32&lt;/td&gt;
          &lt;td&gt;33&lt;/td&gt;
          &lt;td&gt;34&lt;/td&gt;
          &lt;td&gt;35&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my <a href="https://jsfiddle.net/karin/ckfdubsf/2/#&amp;togetherjs=thxFQj44ii" rel="noreferrer">fiddle</a>.</p>