JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="header">
    <table>
      <thead>
        <tr>
          <th>Head 1</th>
          <th>Head 2</th>
          <th>Head 3</th>
          <th>Head 4</th>
          <th>Head 5</th>
          <th>Head 6</th>
        </tr>
      </thead>
    </table>
  </div>

  <div class="main_body">
    <table>
      <thead>
        <tr>
          <th>Head 1</th>
          <th>Head 2</th>
          <th>Head 3</th>
          <th>Head 4</th>
          <th>Head 5</th>
          <th>Head 6</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>11</td>
          <td>23</td>
          <td>44</td>
          <td>20</td>
          <td>30</td>
          <td>40</td>
        </tr>
        <tr>
          <td>32</td>
          <td>1</td>
          <td>7</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
        </tr>
        <tr>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>49</td>
          <td>30</td>
          <td>57</td>
          <td>30</td>
          <td>41</td>
          <td>52</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="footer">
    <table>
      <tbody>
        <tr>
          <td>49</td>
          <td>30</td>
          <td>57</td>
          <td>30</td>
          <td>41</td>
          <td>52</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

SCSS

.wrapper {
  margin-top: 10rem;
  max-height: 6.7rem;
  max-width: 12.5rem;
  overflow: scroll;
  table {
    width: 25rem;
  }
}

.header,
.footer {
  table {
    position: absolute;
    background: white;
  }
}

.footer table {
  bottom: 10.6rem;
}

table {
  thead {
    tr {
      th {
        width: 4rem;
        text-align: center;
      }
    }
  }
  tbody {
    tr {
      td {
        width: 4rem;
        text-align: center;
      }
    }
  }
}