JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Fixed &lt;thead&gt; Sandbox</h1>  
<table>
  <thead>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
      <td>Column 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
     ...

CSS

body {
    font-family: sans-serif;
    padding: 0.3em 0.6em;
}
h1 {
    font-size: 2em;
    margin: 0.6em 0;
}
h2 {
    font-size: 1.3em;
    margin: 0.6em 0;
}
.wrapper {
    position: relative;
}
.container {
    border-bottom: 1px solid #ddd;
    display: inline-block;
    height: 15em;
    overflow: auto;
}
.clone {
    position: absolute;
    top: 0;
    left: 0;
}
table {
    width: 400px;
}
thead {
    background: #eee;
}
td {
    border: 1px solid #ddd;
    padding: 0.3em 0.6em;
}

JavaScript

var $thead = $('thead').clone(),
    $clone = $('<table class="clone"></table>');

// If a flexable layout is needed, then you can set
// the width of the clone to the same with as the table,
// but then you would need to watch for the window to resize
// and update the with accordingly.
$clone.html($thead);//.width($('table').outerWidth());

$('table').wrap('<div class="wrapper"><div class="container">');

$('.wrapper').prepend($clone);