title: HTML table with mcustomscrollbar and fixed column header
body: <p>I have created a table with scrollbar in which header is fixed while scrolling y and header is scrolling while scrolling table x. Here is my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
   $('table').on('scroll', function () {
    $("table &gt; *").width($("table").width() + $("table").scrollLeft());
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><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>
  <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;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>
  </div>
  </div>
  </p>
  
  <p>But problem is that I can't implement this functionality with mcustomscrollbar. And I want this functionality of scrolling with mcustomscrollbar or with any other attractive CSS on scrollbar which can not be affected by browser. If anyone knows the solution of this problem, then answer will be appreciated.</p>