JSFiddle - React, Tailwind, and code Playground

by sazakharov

HTML

<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>
</tr>
</thead>
<tfoot>
<tr>
  <th></th>
  <th>footer</th>
  <th>footer</th>
  <th>footer</th>
  <th>footer</th>
  <th>footer</th>
  <th>footer</th>
  <th>footer</th>
</tr>
</tfoot>
<tbody>
<tr>
  <th>head1</th>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
</tr>
<tr>
  <th>head2</th>
  <td>body body body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
</tr>
<tr>
  <th>head3</th>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
</tr>
<tr>
  <th>head4</th>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
</tr>
<tr>
  <th>head5</th>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
</tr>
<tr>
  <th>head6</th>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
</tr>
<tr>
  <th>head7</th>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
</tr>
<tr>
  <th>head8</th>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
</tr>
<tr>
  <th>head9</th>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
</tr>
<tr>
  <th>head10</th>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
</tr>
<tr>
  <th>head11</th>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
</tr>
<tr>
  <th>head12</th>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
  <td>body</td>
 ...

CSS

div {
  max-width: auto;
  max-height: 20em;
  overflow: scroll;
  position: relative;
}

table {
  position: relative;
  border-collapse: collapse;
  width: 100%;
}

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;
}

tfoot td {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 30;
  background: #000;
  color: #FFF;
}

tfoot td:first-child {
  left: 0;
  z-index: 1;
}