JSFiddle - React, Tailwind, and code Playground

by Tyler Brown

HTML

<div class="scrolly-container">
  <h1>Scrolly</h1>
  <table>
    <thead>
      <tr>
        <th>fo</th>
        <th>bar</th>
        <th>bazzz</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>afff</td><td>b</td><td>c</td></tr>
      <tr><td>d</td><td>e</td><td>f</td></tr>
      <tr><td>g</td><td>h</td><td>i</td></tr>
      <tr><td>a</td><td>b</td><td>c</td></tr>
      <tr><td>d</td><td>e</td><td>f</td></tr>
      <tr><td>g</td><td>h</td><td>i</td></tr>
      <tr><td>a</td><td>b</td><td>c</td></tr>
      <tr><td>d</td><td>e</td><td>f</td></tr>
      <tr><td>g</td><td>h</td><td>i</td></tr>
      <tr><td>a</td><td>b</td><td>c</td></tr>
      <tr><td>d</td><td>e</td><td>f</td></tr>
      <tr><td>g</td><td>h</td><td>i</td></tr>
      <tr><td>a</td><td>b</td><td>c</td></tr>
      <tr><td>d</td><td>e</td><td>f</td></tr>
      <tr><td>g</td><td>h</td><td>i</td></tr>
      <tr><td>a</td><td>b</td><td>c</td></tr>
      <tr><td>d</td><td>e</td><td>f</td></tr>
      <tr><td>g</td><td>hffffff</td><td>i</td></tr>
      <tr><td>a</td><td>b</td><td>c</td></tr>
      <tr><td>d</td><td>e</td><td>f</td></tr>
      <tr><td>g</td><td>h</td><td>i</td></tr>
    </tbody>
  </table>
</div>

CSS

.scrolly-container {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  overflow: auto;
}

table {
  width: 100%;
}

td, th {
  padding: 5px;
}

th:nth-child(2) {
  position: sticky;
  top: 0;
  background-color: #eee;
}