JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tablediv">
  <table cellspacing="0" id="itemtable" align="center">
    <tr>
      <th> SLno</th>
      <th>Item name</th>
      <th>Item code</th>
      <th>Supplier</th>
      <th>Received qty</th>
      <th>Accepted qty</th>
      <th>Rejected qty</th>
      <th>Remarks</th>
    </tr>
  </table>
</div>

Expand this: increase width

CSS

/* table-itemtable styles */

table {
}

th,
td {
  text-align: center;
  padding: 8px;
}

th {
  background-color: #4CAF50;
  color: white;
}

tr {
  border-bottom: 1px solid;
}

tbody {
  display: block;
}

tbody {
  height: 300px;
  /* Just for the demo          */
  overflow-y: auto;
  /* Trigger vertical scroll    */
  overflow-x: hidden;
  /* Hide the horizontal scroll */
}