Fix table body when screen resizing
<p>I'm trying to have a table with  fixed header and first column like the example belows:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
  var demo, fixedTable;
  fixedTable = function(el) {
    var $body, $header, $sidebar;
    $body = $(el).find('.fixedTable-body');
    $sidebar = $(el).find('.fixedTable-sidebar table');
    $header = $(el).find('.fixedTable-header table');
    return $($body).scroll(function() {
      $($sidebar).css('margin-top', -$($body).scrollTop());
      return $($header).css('margin-left', -$($body).scrollLeft());
    });
  };
  demo = new fixedTable($('#demo'));
}.call(this));</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.fixedTable .table {
  background-color: white;
  width: auto;
}

.fixedTable .table tr td,
.fixedTable .table tr th {
  min-width: 100px;
  width: 100px;
  min-height: 20px;
  height: 20px;
  padding: 5px;
}

.fixedTable-header {
  width: 510px;
  height: 30px;
  margin-left: 110px;
  overflow: hidden;
  border-bottom: 1px solid #CCC;
}

.fixedTable-sidebar {
  width: 110px;
  height: 310px;
  float: left;
  overflow: hidden;
  border-right: 1px solid #CCC;
}

.fixedTable-body {
  overflow: auto;
  width: 510px;
  height: 310px;
  float: left;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="fixedTable" id="demo"&gt;
  &lt;header class="fixedTable-header"&gt;
    &lt;table class="table table-bordered"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;A&lt;/th&gt;
          &lt;th&gt;B&lt;/th&gt;
          &lt;th&gt;C&lt;/th&gt;
          &lt;th&gt;D&lt;/th&gt;
          &lt;th&gt;E&lt;/th&gt;
          &lt;th&gt;F&lt;/th&gt;
          &lt;th&gt;G&lt;/th&gt;
          &lt;th&gt;H&lt;/th&gt;
          &lt;th&gt;I&lt;/th&gt;
          &lt;th&gt;J&lt;/th&gt;
          &lt;th&gt;K&lt;/th&gt;
          &lt;th&gt;L&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
    &lt;/table&gt;
  &lt;/header&gt;
  &lt;aside class="fixedTable-sidebar"&gt;
    &lt;table class="table table-bordered"&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;14567567465447567467&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;3&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;4&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;5&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;6&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;7&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;8&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;9&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;10&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;11&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;12&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;13&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;14&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;15&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;16&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;17&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;18&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;19&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/aside&gt;
  &lt;div class="fixedTable-body"&gt;
    &lt;table class="table table-bordered"&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td&gt;d&lt;/td&gt;
          &lt;td&gt;e&lt;/td&gt;
          &lt;td&gt;f&lt;/td&gt;
          &lt;td&gt;g&lt;/td&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td&gt;i&lt;/td&gt;
          &lt;td&gt;j&lt;/td&gt;
          &lt;td&gt;k&lt;/td&gt;
          &lt;td&gt;l&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td&gt;d&lt;/td&gt;
          &lt;td&gt;e&lt;/td&gt;
          &lt;td&gt;f&lt;/td&gt;
          &lt;td&gt;g&lt;/td&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td&gt;i&lt;/td&gt;
          &lt;td&gt;j&lt;/td&gt;
          &lt;td&gt;k&lt;/td&gt;
          &lt;td&gt;l&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td&gt;d&lt;/td&gt;
          &lt;td&gt;e&lt;/td&gt;
          &lt;td&gt;f&lt;/td&gt;
          &lt;td&gt;g&lt;/td&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td&gt;i&lt;/td&gt;
          &lt;td&gt;j&lt;/td&gt;
          &lt;td&gt;k&lt;/td&gt;
          &lt;td&gt;l&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td&gt;d&lt;/td&gt;
          &lt;td&gt;e&lt;/td&gt;
          &lt;td&gt;f&lt;/td&gt;
          &lt;td&gt;g&lt;/td&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td&gt;i&lt;/td&gt;
          &lt;td&gt;j&lt;/td&gt;
          &lt;td&gt;k&lt;/td&gt;
          &lt;td&gt;l&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td&gt;d&lt;/td&gt;
          &lt;td&gt;e&lt;/td&gt;
          &lt;td&gt;f&lt;/td&gt;
          &lt;td&gt;g&lt;/td&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td&gt;i&lt;/td&gt;
          &lt;td&gt;j&lt;/td&gt;
          &lt;td&gt;k&lt;/td&gt;
          &lt;td&gt;l&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td&gt;d&lt;/td&gt;
          &lt;td&gt;e&lt;/td&gt;
          &lt;td&gt;f&lt;/td&gt;
          &lt;td&gt;g&lt;/td&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td&gt;i&lt;/td&gt;
          &lt;td&gt;j&lt;/td&gt;
          &lt;td&gt;k&lt;/td&gt;
          &lt;td&gt;l&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td&gt;d&lt;/td&gt;
          &lt;td&gt;e&lt;/td&gt;
          &lt;td&gt;f&lt;/td&gt;
          &lt;td&gt;g&lt;/td&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td&gt;i&lt;/td&gt;
          &lt;td&gt;j&lt;/td&gt;
          &lt;td&gt;k&lt;/td&gt;
          &lt;td&gt;l&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td&gt;d&lt;/td&gt;
          &lt;td&gt;e&lt;/td&gt;
          &lt;td&gt;f&lt;/td&gt;
          &lt;td&gt;g&lt;/td&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td&gt;i&lt;/td&gt;
          &lt;td&gt;j&lt;/td&gt;
          &lt;td&gt;k&lt;/td&gt;
          &lt;td&gt;l&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td&gt;d&lt;/td&gt;
          &lt;td&gt;e&lt;/td&gt;
          &lt;td&gt;f&lt;/td&gt;
          &lt;td&gt;g&lt;/td&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td&gt;i&lt;/td&gt;
          &lt;td&gt;j&lt;/td&gt;
          &lt;td&gt;k&lt;/td&gt;
          &lt;td&gt;l&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td&gt;d&lt;/td&gt;
          &lt;td&gt;e&lt;/td&gt;
          &lt;td&gt;f&lt;/td&gt;
          &lt;td&gt;g&lt;/td&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td&gt;i&lt;/td&gt;
          &lt;td&gt;j&lt;/td&gt;
          &lt;td&gt;k&lt;/td&gt;
          &lt;td&gt;l&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td&gt;d&lt;/td&gt;
          &lt;td&gt;e&lt;/td&gt;
          &lt;td&gt;f&lt;/td&gt;
          &lt;td&gt;g&lt;/td&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td&gt;i&lt;/td&gt;
          &lt;td&gt;j&lt;/td&gt;
          &lt;td&gt;k&lt;/td&gt;
          &lt;td&gt;l&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td&gt;d&lt;/td&gt;
          &lt;td&gt;e&lt;/td&gt;
          &lt;td&gt;f&lt;/td&gt;
          &lt;td&gt;g&lt;/td&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td&gt;i&lt;/td&gt;
          &lt;td&gt;j&lt;/td&gt;
          &lt;td&gt;k&lt;/td&gt;
          &lt;td&gt;l&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td&gt;d&lt;/td&gt;
          &lt;td&gt;e&lt;/td&gt;
          &lt;td&gt;f&lt;/td&gt;
          &lt;td&gt;g&lt;/td&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td&gt;i&lt;/td&gt;
          &lt;td&gt;j&lt;/td&gt;
          &lt;td&gt;k&lt;/td&gt;
          &lt;td&gt;l&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td&gt;d&lt;/td&gt;
          &lt;td&gt;e&lt;/td&gt;
          &lt;td&gt;f&lt;/td&gt;
          &lt;td&gt;g&lt;/td&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td&gt;i&lt;/td&gt;
          &lt;td&gt;j&lt;/td&gt;
          &lt;td&gt;k&lt;/td&gt;
          &lt;td&gt;l&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td&gt;d&lt;/td&gt;
          &lt;td&gt;e&lt;/td&gt;
          &lt;td&gt;f&lt;/td&gt;
          &lt;td&gt;g&lt;/td&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td&gt;i&lt;/td&gt;
          &lt;td&gt;j&lt;/td&gt;
          &lt;td&gt;k&lt;/td&gt;
          &lt;td&gt;l&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td&gt;d&lt;/td&gt;
          &lt;td&gt;e&lt;/td&gt;
          &lt;td&gt;f&lt;/td&gt;
          &lt;td&gt;g&lt;/td&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td&gt;i&lt;/td&gt;
          &lt;td&gt;j&lt;/td&gt;
          &lt;td&gt;k&lt;/td&gt;
          &lt;td&gt;l&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td&gt;d&lt;/td&gt;
          &lt;td&gt;e&lt;/td&gt;
          &lt;td&gt;f&lt;/td&gt;
          &lt;td&gt;g&lt;/td&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td&gt;i&lt;/td&gt;
          &lt;td&gt;j&lt;/td&gt;
          &lt;td&gt;k&lt;/td&gt;
          &lt;td&gt;l&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>When I do a screen resize the body of the table (div class="fixedTable-body") gets beyond the table. </p>

<p>Could anyone suggest a solution to fix the body ?</p>

<p>This is the link for codepen: <a href="http://codepen.io/ajkochanowicz/pen/KHdih" rel="nofollow noreferrer">http://codepen.io/ajkochanowicz/pen/KHdih</a></p>