JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div id="scrolltable">
  <table>
    <tr>
      <th>
        <div>first col</div>
      </th>
      <th>
        <div>second</div>
      </th>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>foo foo foo foo foo</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar bar bar</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
  </table>
</div>

CSS

#scrolltable {
  margin-top: 20px;
  height: 200px;
  overflow: auto;
}
th div, td {
    border: 1px black solid;
}
th {
  position: relative;
}
#scrolltable table {
  border-collapse: collapse;
}

#scrolltable tr:nth-child(even) {
  background: #EEE;
}

#scrolltable th div {
  position: absolute;
  margin-top: -20px;
}