JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <table id="twitch" class="scroll">
    <thead>
      <tr>
        <th>#</th>
        <th>Species</th>
        <th>Date</th>
        <th>Locality</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>2</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>3</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>4</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>5</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>6</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>7</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>8</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>9</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>10</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>11</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>12</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>13</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>14</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>15</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
    </tbody>
  </table>
  </div>

CSS

body {
  font-family: Arial;
  font-size: 0.8em;
}

table {
  width: 400px;
  margin: auto;
  background-color: lightblue;
}

table,
th,
td {
  border: 1px solid red;
  border-collapse: collapse;
}

thead {
  color: #fff;
  background-color: #00f;
  display: block;
  width: 100%;
}

tbody {
  height: 100px;
  width: 100%;
  display: block;
  overflow-y: scroll;
}

tr {
  width: 100%;
  display: table;
  box-sizing: border-box;
}
table.scroll {
    /* width: 100%; */ /* Optional */
    /* border-collapse: collapse; */
    border-spacing: 0;
    border: 2px solid black;
}

table.scroll tbody,
table.scroll thead { display: block; }

thead tr th { 
    height: 30px;
    line-height: 30px;
    /* text-align: left; */
}

table.scroll tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody { border-top: 2px solid black; }

tbody td, thead th {
    /* width: 20%; */ /* Optional */
    border-right: 1px solid black;
    /* white-space: nowrap; */
}

tbody td:last-child, thead th:last-child {
    border-right: none;
}

JavaScript

// Change the selector if needed
var $table = $('table.scroll'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();
    
    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });    
}).resize(); // Trigger resize handler