JSFiddle - React, Tailwind, and code Playground

by Pankaj Kargirwar

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<table class="table is-fullwidth">
  <thead>
    <tr>
      <th>
        Head1
      </th>
      <th>
        Head2
      </th>
    </tr>

  </thead>
  <tbody>
    <tr>
      <td>
        h1
      </td>
      <td>
        h2
      </td>
    </tr>

    <tr>
      <td>
        h1
      </td>
      <td>
        h2
      </td>

    </tr>

    <tr>
      <td>
        h1
      </td>
      <td>
        h2
      </td>

    </tr>

    <tr>
      <td>
        h1
      </td>
      <td>
        h2
      </td>

    </tr>

    <tr>
      <td>
        h1
      </td>
      <td>
        h2
      </td>

    </tr>

    <tr>
      <td>
        h1
      </td>
      <td>
        h2
      </td>
    </tr>
  </tbody>
</table>

CSS

thead {
  position: sticky;
  top: 0;
  
}

th {
  
    background-color: #eee;
}

tbody {
  background-color: #eee;

  height: 100px;
  overflow-y: auto;
  width: 100%;
}