Fixed TABLE Header with scroll

HTML

<table class="tableSection flex-column">
  <thead>
    <tr>
      <th><span class="text">album</span>

      </th>
      <th><span class="text">song</span>

      </th>
      <th><span class="text">genre</span>

      </th>
    </tr>
  </thead>
  <tbody id="mytest">
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>        </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>        </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
  </tbody>
</table>

CSS

table.tableSection {
        /* display: table; */
        width: 100%;
    }
    table.tableSection thead, table.tableSection tbody {
        float: left;
        width: 100%;
    }
    /* table.tableSection tbody {
        overflow: auto;
        height: 150px;    
    } */
    table.tableSection tr {
        width: 100%;
        display: table;
        text-align: left;
    }
    table.tableSection th, table.tableSection td {
        width: 33%;
    border: 1px solid #ccc;
    }
    .extrawidth{
        width:calc(100% - 18px) !important;
    }
    
    .flex-column {
      height: calc(100vh - 25.6px);
      display: flex;
      flex-direction: column;
    }
    .flex-column tbody {
      flex-grow: 1!important;
      overflow: auto;
    }

JavaScript

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);

$(document).ready(function(){    
  if($('#mytest').hasScrollBar())
  {
       $('.tableSection thead').toggleClass('extrawidth');
  }
});