title: How to fix position of thead with Scrolled tbody
body: <p>How can I create a table with scrollable body with a fixed head with the each head is same in size as its associated column, and each column has a different width than other columns. </p>
  
  <p>For example, I have this table </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-css lang-css prettyprint-override"><code>  table thead tr {
    display: block;
  }
  
  table th,
  table td {
    width: 100px; //fixed width
  }
  
  table tbody {
    display: block;
    height: 200px;
    overflow: auto; //set tbody to auto
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;table border='1'&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Column 1&lt;/th&gt;
        &lt;th&gt;Column 2&lt;/th&gt;
        &lt;th&gt;Column 3&lt;/th&gt;
        &lt;th&gt;Column 4&lt;/th&gt;
        &lt;th&gt;Column 5&lt;/th&gt;
        &lt;th&gt;Column 6&lt;/th&gt;
        &lt;th&gt;Column 7&lt;/th&gt;
        &lt;th&gt;Column 8&lt;/th&gt;
        &lt;th&gt;Column 9&lt;/th&gt;
        &lt;th&gt;Column 10&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
        &lt;td&gt;Looooooong&lt;/td&gt;
        &lt;td&gt;Very Looooooooooong&lt;/td&gt;
        &lt;td&gt;short&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The header does not match its associated column in position and size. Is there a fix to my method or another approach to achieve my goal without this problem ? </p>