tabl ヘッダを固定して、テーブルのスクロールさせるcssです。 テーブル全体をラッパータグで囲います。

css

.mytable__wrapper {
    height: 100px;
    overflow-y: scroll;
}
table.mytable {
	text-align: left;
	position: relative;
	border-collapse: collapse; 
}
table.mytable th,
table.mytable td{
	padding: 1rem;
	border: solid 1px #ddd;
}
table.mytable th {
    color: red;
	background: white;
	position: sticky;
	top: 0;
}    

<div class="mytable__wrapper">
    <table class="mytable">
      <thead>
        <tr>
          <th>見出し1</th>
          <th>見出し2</th>
          <th>見出し3</th>
          <th>見出し4</th>
          <th>見出し5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ1</td>
          <td>データ2</td>
          <td>データ3</td>
          <td>データ4</td>
          <td>データ5</td>
        </tr>
        <tr>
          <td>データ1</td>
          <td>データ2</td>
          <td>データ3</td>
          <td>データ4</td>
          <td>データ5</td>
        </tr>
        <tr>
          <td>データ1</td>
          <td>データ2</td>
          <td>データ3</td>
          <td>データ4</td>
          <td>データ5</td>
        </tr>
        <tr>
          <td>データ1</td>
          <td>データ2</td>
          <td>データ3</td>
          <td>データ4</td>
          <td>データ5</td>
        </tr>
        <tr>
          <td>データ1</td>
          <td>データ2</td>
          <td>データ3</td>
          <td>データ4</td>
          <td>データ5</td>
        </tr>
      </tbody>
    </table>
    </div>

引用 : https://bit.ly/3ALIZjp