JSFiddle - React, Tailwind, and code Playground

by Eric Pias

HTML

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

CSS

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