title: Table header fixed, scrollable body horizontal and vertical, variable cell width
body: <p>I realize this question has been asked quite a bit on Stack Overflow; however, after looking through a number of them, I believe my question has one more requirement. I want to transform a regular html table, into a table that can be scrolled both vertically and horizontally, while the header is fixed. The table in my project is dynamically generated, so the cell width can't be fix.</p>
  
  <p>Problems:</p>
  
  <ul>
  <li>when scrolling left and right, the table scrolls, but the header is cut off</li>
  <li>header and body cell width doesn't fit</li>
  </ul>
  
  <p>Here is a JSFiddle to show you my problem</p>
  
  <p><a href="http://jsfiddle.net/nps0x7zj/44/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>Table example:</p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
    &lt;table id="vehicleTable" class="table pointer hover table-striped table-bordered" role="grid"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Firstname&lt;/th&gt;
          &lt;th&gt;Lastname&lt;/th&gt; 
          &lt;th&gt;Age&lt;/th&gt;
          &lt;th&gt;Gender&lt;/th&gt;
          &lt;th&gt;Size&lt;/th&gt; 
          &lt;th&gt;Mass&lt;/th&gt;
          &lt;th&gt;Eyecolor&lt;/th&gt;
          &lt;th&gt;Style&lt;/th&gt; 
          &lt;th&gt;Shoe&lt;/th&gt;
          &lt;th&gt;Sport&lt;/th&gt;
          &lt;th&gt;Social Media&lt;/th&gt;
        &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody&gt;
         &lt;tr&gt;
           &lt;td&gt;Jill&lt;/td&gt;
           &lt;td&gt;Smith&lt;/td&gt; 
           &lt;td&gt;50&lt;/td&gt;
           &lt;td&gt;Female&lt;/td&gt;
           &lt;td&gt;1.60&lt;/td&gt; 
           &lt;td&gt;60&lt;/td&gt;
           &lt;td&gt;Green&lt;/td&gt;
           &lt;td&gt;Cool&lt;/td&gt; 
           &lt;td&gt;New Balance&lt;/td&gt;
           &lt;td&gt;Football&lt;/td&gt; 
           &lt;td&gt;Facebook&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
           &lt;td&gt;Anthony&lt;/td&gt;
           &lt;td&gt;Meyer&lt;/td&gt; 
           &lt;td&gt;34&lt;/td&gt;
           &lt;td&gt;Male&lt;/td&gt;
           &lt;td&gt;1.84&lt;/td&gt; 
           &lt;td&gt;88&lt;/td&gt;
           &lt;td&gt;Blue&lt;/td&gt;
           &lt;td&gt;Elegant&lt;/td&gt; 
           &lt;td&gt;All stars&lt;/td&gt;
           &lt;td&gt;Golf&lt;/td&gt; 
           &lt;td&gt;Facebook&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;Eve&lt;/td&gt;
           &lt;td&gt;Jackson&lt;/td&gt; 
           &lt;td&gt;94&lt;/td&gt;
           &lt;td&gt;Female&lt;/td&gt;
           &lt;td&gt;1.58&lt;/td&gt; 
           &lt;td&gt;55&lt;/td&gt;
           &lt;td&gt;Green&lt;/td&gt;
           &lt;td&gt;Cool&lt;/td&gt; 
           &lt;td&gt;Adidas&lt;/td&gt;
           &lt;td&gt;Chess&lt;/td&gt;
           &lt;td&gt;Instagram&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;Jill&lt;/td&gt;
           &lt;td&gt;Smith&lt;/td&gt; 
           &lt;td&gt;50&lt;/td&gt;
           &lt;td&gt;Female&lt;/td&gt;
           &lt;td&gt;1.60&lt;/td&gt; 
           &lt;td&gt;60&lt;/td&gt;
           &lt;td&gt;Green&lt;/td&gt;
           &lt;td&gt;Cool&lt;/td&gt; 
           &lt;td&gt;New Balance&lt;/td&gt;
           &lt;td&gt;Chess&lt;/td&gt;
           &lt;td&gt;Instagram&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
           &lt;td&gt;Anthony&lt;/td&gt;
           &lt;td&gt;Meyer&lt;/td&gt; 
           &lt;td&gt;34&lt;/td&gt;
           &lt;td&gt;Male&lt;/td&gt;
           &lt;td&gt;1.84&lt;/td&gt; 
           &lt;td&gt;88&lt;/td&gt;
           &lt;td&gt;Blue&lt;/td&gt;
           &lt;td&gt;Elegant&lt;/td&gt; 
           &lt;td&gt;All stars&lt;/td&gt;
           &lt;td&gt;Chess&lt;/td&gt;
           &lt;td&gt;Instagram&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;Eve&lt;/td&gt;
           &lt;td&gt;Jackson&lt;/td&gt; 
           &lt;td&gt;94&lt;/td&gt;
           &lt;td&gt;Female&lt;/td&gt;
           &lt;td&gt;1.58&lt;/td&gt; 
           &lt;td&gt;55&lt;/td&gt;
           &lt;td&gt;Green&lt;/td&gt;
           &lt;td&gt;Cool&lt;/td&gt; 
           &lt;td&gt;Adidas&lt;/td&gt;
           &lt;td&gt;Chess&lt;/td&gt;
           &lt;td&gt;Instagram&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;Anthony&lt;/td&gt;
           &lt;td&gt;Meyer&lt;/td&gt; 
           &lt;td&gt;34&lt;/td&gt;
           &lt;td&gt;Male&lt;/td&gt;
           &lt;td&gt;1.84&lt;/td&gt; 
           &lt;td&gt;88&lt;/td&gt;
           &lt;td&gt;Blue&lt;/td&gt;
           &lt;td&gt;Elegant&lt;/td&gt; 
           &lt;td&gt;All stars&lt;/td&gt;
           &lt;td&gt;Golf&lt;/td&gt; 
           &lt;td&gt;Facebook&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;Eve&lt;/td&gt;
           &lt;td&gt;Jackson&lt;/td&gt; 
           &lt;td&gt;94&lt;/td&gt;
           &lt;td&gt;Female&lt;/td&gt;
           &lt;td&gt;1.58&lt;/td&gt; 
           &lt;td&gt;55&lt;/td&gt;
           &lt;td&gt;Green&lt;/td&gt;
           &lt;td&gt;Cool&lt;/td&gt; 
           &lt;td&gt;Adidas&lt;/td&gt;
           &lt;td&gt;Chess&lt;/td&gt;
           &lt;td&gt;Instagram&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;Jill&lt;/td&gt;
           &lt;td&gt;Smith&lt;/td&gt; 
           &lt;td&gt;50&lt;/td&gt;
           &lt;td&gt;Female&lt;/td&gt;
           &lt;td&gt;1.60&lt;/td&gt; 
           &lt;td&gt;60&lt;/td&gt;
           &lt;td&gt;Green&lt;/td&gt;
           &lt;td&gt;Cool&lt;/td&gt; 
           &lt;td&gt;New Balance&lt;/td&gt;
           &lt;td&gt;Chess&lt;/td&gt;
           &lt;td&gt;Instagram&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
           &lt;td&gt;Anthony&lt;/td&gt;
           &lt;td&gt;Meyer&lt;/td&gt; 
           &lt;td&gt;34&lt;/td&gt;
           &lt;td&gt;Male&lt;/td&gt;
           &lt;td&gt;1.84&lt;/td&gt; 
           &lt;td&gt;88&lt;/td&gt;
           &lt;td&gt;Blue&lt;/td&gt;
           &lt;td&gt;Elegant&lt;/td&gt; 
           &lt;td&gt;All stars&lt;/td&gt;
           &lt;td&gt;Chess&lt;/td&gt;
           &lt;td&gt;Instagram&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;Eve&lt;/td&gt;
           &lt;td&gt;Jackson&lt;/td&gt; 
           &lt;td&gt;94&lt;/td&gt;
           &lt;td&gt;Female&lt;/td&gt;
           &lt;td&gt;1.58&lt;/td&gt; 
           &lt;td&gt;55&lt;/td&gt;
           &lt;td&gt;Green&lt;/td&gt;
           &lt;td&gt;Cool&lt;/td&gt; 
           &lt;td&gt;Adidas&lt;/td&gt;
           &lt;td&gt;Chess&lt;/td&gt;
           &lt;td&gt;Instagram&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;Jill&lt;/td&gt;
           &lt;td&gt;Smith&lt;/td&gt; 
           &lt;td&gt;50&lt;/td&gt;
           &lt;td&gt;Female&lt;/td&gt;
           &lt;td&gt;1.60&lt;/td&gt; 
           &lt;td&gt;60&lt;/td&gt;
           &lt;td&gt;Green&lt;/td&gt;
           &lt;td&gt;Cool&lt;/td&gt; 
           &lt;td&gt;New Balance&lt;/td&gt;
           &lt;td&gt;Chess&lt;/td&gt;
           &lt;td&gt;Instagram&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
           &lt;td&gt;Anthony&lt;/td&gt;
           &lt;td&gt;Meyer&lt;/td&gt; 
           &lt;td&gt;34&lt;/td&gt;
           &lt;td&gt;Male&lt;/td&gt;
           &lt;td&gt;1.84&lt;/td&gt; 
           &lt;td&gt;88&lt;/td&gt;
           &lt;td&gt;Blue&lt;/td&gt;
           &lt;td&gt;Elegant&lt;/td&gt; 
           &lt;td&gt;All stars&lt;/td&gt;
           &lt;td&gt;Chess&lt;/td&gt;
           &lt;td&gt;Instagram&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;Eve&lt;/td&gt;
           &lt;td&gt;Jackson&lt;/td&gt; 
           &lt;td&gt;94&lt;/td&gt;
           &lt;td&gt;Female&lt;/td&gt;
           &lt;td&gt;1.58&lt;/td&gt; 
           &lt;td&gt;55&lt;/td&gt;
           &lt;td&gt;Green&lt;/td&gt;
           &lt;td&gt;Cool&lt;/td&gt; 
           &lt;td&gt;Adidas&lt;/td&gt;
           &lt;td&gt;Chess&lt;/td&gt;
           &lt;td&gt;Instagram&lt;/td&gt;
        &lt;/tr&gt;
       &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>table#vehicleTable {
      position: relative;
      display: block;
      margin-left: 0px;
      width: 400px;
    height: 400px;
      table-layout: fixed;
  }
  table#vehicleTable thead {
      position: relative;
      display: block; /*seperates the header from the body allowing it to be positioned*/
    width: inherit;
      overflow-y: hidden;
    overflow-x: hidden;
      background-color: blue;
    color: white;
  }
  table#vehicleTable tbody {
      position: relative;
      display: block; /*seperates the tbody from the header*/
      width: inherit;
      max-height: 400px;
      height: 400px;
      overflow-y: scroll;
      overflow-x: scroll;
  }
  .table-responsive {
      display: block;
      height: 400px;
      table-layout: fixed;
  }
  table#vehicleTable td, table#vehicleTable thead th {
      table-layout: fixed;
  }
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>$(document).ready(function () {
          $('tbody').scroll(function (e) { 
              $('thead').css("left", -$("tbody").scrollLeft());
              $('thead th div:nth-child(1)').css("left", $("tbody").scrollLeft());
              $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft());
          });
      });
  </code></pre>