JSFiddle - React, Tailwind, and code Playground

by Mike Jacobson

HTML

<div class="table-wrapper">
<div>
  <div>
  <table>
    <thead>
      <tr>
        <th>Head 1</th>
        <th>Head 1</th>
        <th>Head 1</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
      </tr>
    </tbody>
  </table>
    
  </div>
</div>
</div>

CSS

div.table-wrapper {
  border: 1px solid #ccc;
  height: 100px;
  width: 100%;
  overflow-y: auto;
 
 }
 
 table {
   width: 100%;
 }
 table thead tr th {
   text-align: left;
   position: sticky;
   top: 0px;
   background-color: #666;
   color: #fff;
 }