Untitled

<style>
  .table-container {
    max-height: 300px; /* Set a maximum height for the container */
    overflow-y: auto; /* Enable vertical scrolling */
  }
  
  .table-container table {
    width: 100%;
    table-layout: fixed;
  }

  .table-container thead,
  .table-container tbody {
    display: block;
  }

  .table-container thead {
    background-color: #f5f5f5;
  }

  .table-container th,
  .table-container td {
    padding: 8px;
  }

  .table-container thead th {
    text-align: left;
  }

  .table-container tbody {
    max-height: 250px; /* Set a maximum height for the body */
    overflow-y: scroll; /* Enable vertical scrolling */
  }
</style>

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <!-- Add more header columns if needed -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <!-- Add more data columns if needed -->
      </tr>
      <!-- Add more rows of data as needed -->
    </tbody>
  </table>
</div>