JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scroll">
  <div class="wrapper">
    <table>
      <tbody>
        <tr><td style="height:39px;"><div><!-- your content goes here --></div></td></tr>
        <tr><td style="height:75px;"><div><!-- your content goes here --></div></td></tr>
        <tr><td style="height:111px;"><div><!-- your content goes here --></div></td></tr>
        <tr><td style="height:39px;"><div><!-- your content goes here --></div></td></tr>
      </tbody>
    </table>
  </div>
</div>

CSS

.scroll {
  background-color:white;
  overflow-y: scroll; 
  width: 300px; 
  height: 200px;
}

.wrapper {
  /*height: auto; no need, it's already the default */
  /*width: 280px; no need, since default width is 100% (which is 300px) - padding 10 left and padding 10 right, you get 280px  */
  padding: 10px;
  /*margin: 0px; no need, it's already the default */
}

table {
  width:90%; 
  margin:0px auto;/* auto is better than 5%, you can now change only the width without the need to change the margin  */
  border-collapse:collapse;
}

td {
  /*position:relative; cause of the problem */
  border:1px solid black;
  padding: 0px;/* by default table-cells have some padding */
}
td > div {
  position: relative;
  height: 100%;
}