JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<div class="scroll-container">

<div class="table-container">
<table>
<thead>
<tr>
  <th>heading</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>heading</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
</tr>
</thead>
<tbody>
<tr>
  <th>head</th>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
</tr>
<tr>
  <th>head</th>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
 ...

CSS

.scroll-container {
  height: 100%;
}

.table-container {
  max-width: 40em;
  max-height: 20em;
  overflow: scroll;
  position: relative;
}

table {
  position: relative;
  border-collapse: collapse;
}

td, th {
  padding: 0.25em;
}

thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  background: #000;
  color: #FFF;
}

thead th:first-child {
  left: 0;
  z-index: 1;
}

tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background: #FFF;
  border-right: 1px solid #CCC;
}