htmlで表のヘッダー部分のみ固定したい

次のようなhtmlでヘッダーを固定したいときのメモ

次の感じの表のヘッダーのみ固定してスクロールできるようにしたかった。

# 項目1のみ縦3行結合した表
<div class="target-data">
    <table class="table">
        <thead>
            <tr>
                <th>項目１</th>
                <th>項目２</th>
                <th>項目３</th>
                <th>項目４</th>
                <th>項目５</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="3">値１</td>
                <td>値２</td>
                <td>値３</td>
                <td>値４</td>
                <td>値５</td>
            </tr>
        </tbody>
    </table>
</div>

cssを次のようにする

# 親要素にスクロールを設定（overflow-y: scroll;）
.target-data {
      display: block;
      height: 500px;
      overflow-y: scroll;
}
# ヘッダーを固定（position: sticky;）
.target-data table thead {
      display: table;
      top: 0px;
      width: 100%;
      table-layout: fixed;
      position: sticky;
}
.target-data table tbody {
      display: table;
      width: 100%;
      table-layout: fixed;
}

参考
WEBブログ | テーブルの行や列を固定しスクロールする方法 | RunLand(ランランド)株式会社

CSSでテーブル表の一部を固定してスクロールする方法 | 福岡のホームページ制作会社 | シンス株式会社