JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tbody>
<tr>
  <td><div></div></td>
  <td><div></div></td>
  <td><div></div></td>
  <td><div></div></td>
</tr>
</tbody>
</table>

CSS

div {
  height: 100%; /* Removing this hides the 'document' scrollbar*/
}

tr {
  width:100%;
  height: 5000px;
  display: table; /*Deleting this line shrinks the 'outer' scrollbar, but does not disappear*/
  table-layout:scroll;
  overflow: s;
}

table {
  width: 90%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

tbody {
  height: 300px;
  display: block;
  overflow: auto;
}