JSFiddle - React, Tailwind, and code Playground

by Eric L

HTML

<table class="fixed_header">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>  
  </thead>
  <tbody>
    <tr>
      <td>1</td><td>1</td><td>1</td><td>1</td>
    </tr>
    <tr>
      <td>1</td><td>1</td><td>1</td><td>1</td>
    </tr>
    <tr>
      <td>1</td><td>1</td><td>1</td><td>1</td>    
    </tr>
    <tr>
      <td>1</td><td>1</td><td>1</td><td>1</td>
    </tr>
    <tr>
      <td>1</td><td>1</td><td>1</td><td>1</td>
    </tr>
    <tr>
      <td>1</td><td>1</td><td>1</td><td>1</td>
    </tr>
    <tr>
      <td>1</td><td>1</td><td>1</td><td>1</td>
    </tr>
    <tr>
      <td>1</td><td>1</td><td>1</td><td>1</td>
    </tr>
  </tbody>
</table>

CSS

.fixed_header tbody {
  display: block;
  overflow: auto;
  height: 20vh;
  width: 100%;
}

.fixed_header thead tr {
  display: block;
}