【初心者向け】tableのヘッダー部分を固定して表示させる方法

table.table01 th {
    /* ヘッダーの見た目に関するスタイル */
    background-color: #6b6b6b;
    color:#fff;
    padding: 10px;
    border-bottom: 1px solid #E0E1E3;
    border-right: 1px solid #E0E1E3;

    /* 固定に関するスタイル */
    position: sticky;
    top:0;
    left: 0;
    z-index: 1;
}

table.table01  thead tr:first-of-type th:first-of-type {
    z-index: 2;
}

<div class="table_wrap">
    <table class="table01">
        <thead>
            <tr>
                <th></th>
                <th>名前</th>
                <th>種族</th>
                <th>特技</th>
                <th>備考</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>うぇぶ</td>
                <td>ねこ</td>
                <td>仮想通貨取引</td>
                <td>得になし</td>
            </tr>
            <tr>
                <th>2</th>
                <td>さいと</td>
                <td>いぬ</td>
                <td>ビットコインのマイニング</td>
                <td>ビットコインで大損</td>
            </tr>
            <tr>
                <th>3</th>
                <td>ほーむ</td>
                <td>ねこ</td>
                <td>デイトレード</td>
                <td>得になし</td>
            </tr>
            <tr>
                <th>4</th>
                <td>うぇぶ</td>
                <td>ねこ</td>
                <td>仮想通貨取引</td>
                <td>得になし</td>
            </tr>
            <tr>
                <th>5</th>
                <td>さいと</td>
                <td>いぬ</td>
                <td>ビットコインのマイニング</td>
                <td>ビットコインで大損</td>
            </tr>
            <tr>
                <th>6</th>
                <td>ほーむ</td>
                <td>ねこ</td>
                <td>デイトレード</td>
                <td>得になし</td>
            </tr>
            <tr>
                <th>7</th>
                <td>うぇぶ</td>
                <td>ねこ</td>
                <td>仮想通貨取引</td>
                <td>得になし</td>
            </tr>
            <tr>
                <th>8</th>
                <td>さいと</td>
                <td>いぬ</td>
                <td>ビットコインのマイニング</td>
                <td>ビットコインで大損</td>
            </tr>
            <tr>
                <th>9</th>
                <td>ほーむ</td>
                <td>ねこ</td>
                <td>デイトレード</td>
                <td>得になし</td>
            </tr>
            <tr>
                <th>10</th>
                <td>うぇぶ</td>
                <td>ねこ</td>
                <td>仮想通貨取引</td>
                <td>得になし</td>
            </tr>
            <tr>
                <th>11</th>
                <td>さいと</td>
                <td>いぬ</td>
                <td>ビットコインのマイニング</td>
                <td>ビットコインで大損</td>
            </tr>
            <tr>
                <th>12</th>
                <td>ほーむ</td>
                <td>ねこ</td>
                <td>デイトレード</td>
                <td>得になし</td>
            </tr>
        </tbody>
    </table>
</div>

/* 今回テーブルを囲っているクラス
（スクロールが分かりやすいようにheightを設定しています） */
.table_wrap {
    overflow: auto;
    height: 300px;
}

/* tableのスタイル widthなどはデザインに合わせて要変更 */
table.table01 {
    width: 1000px;
    min-width: 635px;
    margin: 10px 0;
    font-size: 1.4rem;
    border-spacing: 0px;
    border-collapse: separate;
}

/* ヘッダー固定 */
table.table01 th {
    background-color: #6b6b6b;
    color: #fff;
    padding: 10px;
    border-bottom: 1px solid #E0E1E3;
    border-right: 1px solid #E0E1E3;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
}

table.table01 thead table th {
    border-top: 1px solid #E0E1E3;
}

/* 左上端を重なり順一番前へ */
table.table01 thead tr:first-of-type th:first-of-type {
    z-index: 2;
}

table.table01 tbody td {
    padding: 10px;
    font-weight: normal;
    border-bottom: 1px solid #E0E1E3;
    border-right: 1px solid #E0E1E3;
}