title: XY Scroll HTML table with vertically fixed header
body: <p>I want to add scroll to my html table, both horizontally and vertically too. But only tbody should be allowed to scroll, and thead should be fixed while scrolling tbody vertically and scrolled/adjusted while scrolling tbody horizontally. I know that I have to apply overflow css property to tbody and then after it, adjust thead width with offset by using jquery. If anyone knows the solution, then answer will be appreciated. Here is  my code.</p>
  
  <p>HTML Part</p>
  
  <pre><code>&lt;table&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;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Row 1&lt;/td&gt;
          &lt;td&gt;Row 1&lt;/td&gt;
          &lt;td&gt;Row 1&lt;/td&gt;
          &lt;td&gt;Row 1&lt;/td&gt;
          &lt;td&gt;Row 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Row 2&lt;/td&gt;
          &lt;td&gt;Row 2&lt;/td&gt;
          &lt;td&gt;Row 2&lt;/td&gt;
          &lt;td&gt;Row 2&lt;/td&gt;
          &lt;td&gt;Row 2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Row 3&lt;/td&gt;
          &lt;td&gt;Row 3&lt;/td&gt;
          &lt;td&gt;Row 3&lt;/td&gt;
          &lt;td&gt;Row 3&lt;/td&gt;
          &lt;td&gt;Row 3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Row 4&lt;/td&gt;
          &lt;td&gt;Row 4&lt;/td&gt;
          &lt;td&gt;Row 4&lt;/td&gt;
          &lt;td&gt;Row 4&lt;/td&gt;
          &lt;td&gt;Row 4&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Row 5&lt;/td&gt;
          &lt;td&gt;Row 5&lt;/td&gt;
          &lt;td&gt;Row 5&lt;/td&gt;
          &lt;td&gt;Row 5&lt;/td&gt;
          &lt;td&gt;Row 5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Row 6&lt;/td&gt;
          &lt;td&gt;Row 6&lt;/td&gt;
          &lt;td&gt;Row 6&lt;/td&gt;
          &lt;td&gt;Row 6&lt;/td&gt;
          &lt;td&gt;Row 6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Row 7&lt;/td&gt;
          &lt;td&gt;Row 7&lt;/td&gt;
          &lt;td&gt;Row 7&lt;/td&gt;
          &lt;td&gt;Row 7&lt;/td&gt;
          &lt;td&gt;Row 7&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Row 8&lt;/td&gt;
          &lt;td&gt;Row 8&lt;/td&gt;
          &lt;td&gt;Row 8&lt;/td&gt;
          &lt;td&gt;Row 8&lt;/td&gt;
          &lt;td&gt;Row 8&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Row 9&lt;/td&gt;
          &lt;td&gt;Row 9&lt;/td&gt;
          &lt;td&gt;Row 9&lt;/td&gt;
          &lt;td&gt;Row 9&lt;/td&gt;
          &lt;td&gt;Row 9&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Row 10&lt;/td&gt;
          &lt;td&gt;Row 10&lt;/td&gt;
          &lt;td&gt;Row 10&lt;/td&gt;
          &lt;td&gt;Row 10&lt;/td&gt;
          &lt;td&gt;Row 10&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>        html {
              font-family: verdana;
              font-size: 10pt;
              line-height: 25px;
          }
          table {
              border-collapse: collapse;
              width: 300px;
              overflow-x: scroll;
              display: block;
          }
          thead {
              background-color: #EFEFEF;
          }
          thead, tbody {
              display: block;
          }
          tbody {
              overflow-y: scroll;
              overflow-x: hidden;
              height: 140px;
          }
          td, th {
              min-width: 100px;
              height: 25px;
              border: dashed 1px lightblue;
          }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $('table').on('scroll', function () {
              $("table &gt; *").width($("table").width() + $("table").scrollLeft());
          });
      &lt;/script&gt;
  </code></pre>