tbody scrollable table

In this table, you can scroll the tbody.

by shuNaka

HTML

<table id="test-table" style="width:100%;">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Dow</td>
    </tr>
    <tr>
      <td>Jean</td>
      <td>Francoi</td>
    </tr>
    <tr>
      <td>Albert</td>
      <td>Einstein</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Dow</td>
    </tr>
    <tr>
      <td>Jean</td>
      <td>Francoi</td>
    </tr>
    <tr>
      <td>Albert</td>
      <td>Einstein</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Dow</td>
    </tr>
    <tr>
      <td>Jean</td>
      <td>Francoi</td>
    </tr>
    <tr>
      <td>Albert</td>
      <td>Einstein</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Dow</td>
    </tr>
    <tr>
      <td>Jean</td>
      <td>Francoi</td>
    </tr>
    <tr>
      <td>Albert</td>
      <td>Einstein</td>
    </tr>
  </tbody>
</table>

JavaScript

const makeScrollableTable = function (tableSelector, tbodyHeight) {
  let $table = $(tableSelector);
  let $bodyCells = $table.find('tbody tr:first').children();
  let $headCells = $table.find('thead tr:first').children();
  let headColWidth = 0;
  let bodyColWidth = 0;

  headColWidth = $headCells.map(function () {
    return $(this).outerWidth();
  }).get();
  bodyColWidth = $bodyCells.map(function () {
    return $(this).outerWidth();
  }).get();

  $table.find('thead tr').children().each(function (i, v) {
    $(v).css("width", headColWidth[i]+"px");
    $(v).css("min-width", headColWidth[i]+"px");
    $(v).css("max-width", headColWidth[i]+"px");
  });
  $table.find('tbody tr').children().each(function (i, v) {
    $(v).css("width", bodyColWidth[i]+"px");
    $(v).css("min-width", bodyColWidth[i]+"px");
    $(v).css("max-width", bodyColWidth[i]+"px");
  });

  $table.find('thead').css("display", "block");
  $table.find('tbody').css("display", "block");

  $table.find('tbody').css("height", tbodyHeight+"px");
  $table.find('tbody').css("overflow-y", "auto");
  $table.find('tbody').css("overflow-x", "hidden");

};

makeScrollableTable('#test-table', 250);