JSFiddle - React, Tailwind, and code Playground

by supertrue

HTML

<div class="scrollable-table">
<div>
  <table>
    <thead>
      <tr>
        <th></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>head</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>
       ...

SCSS

body:not(.print):not(.screenshot-template) .table-scrollable {
  max-width: 100%;
  max-height: 20em;
  overflow: scroll;
  position: relative;
}

table {
  position: relative;
}

table th {
  background: white;
}

thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
thead tr:last-child th {
  border-bottom: 1px solid red;
}

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

tbody th {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  border-right: 1px solid #CCC;
}