JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grand-wrapper">
  <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>
</div>

SCSS

.grand-wrapper {
  position: relative;
  overflow: hidden;
  max-height: 6.7rem;
  max-width: 12.5rem;
}

.wrapper {
  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;
      }
    }
  }
}