CSS スクロール要素の中のテーブルのヘッダー固定　(自分メモ)

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document99</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .container {
        /* background-color: dimgray;
        outline: 1px solid black; */
        height: 100vh;
    }
    .wrap {
        margin: 0 auto;
        width: 80%;
        background-color: thistle;
        height: 100vh;

    }
    .nav{
        padding: 20px 0 10px 0;
    }
    .link {
        width: 60%;
        margin: 0 0 0 auto;
        /* background-color: rgba(149, 199, 247, 0.644); */
    }
    .link ul {
        list-style-type: none;
        overflow: hidden;
    }
    .link ul li:first-of-type{
        margin-left: 40px;
    }
    .link ul li {
        float: left;
        padding-left: 30px;
    }

    .mainsub{
        /* background-color: aquamarine;
        outline: 1px solid black; */
    }
    .t1 {
        width: 100%;
        border-collapse:  collapse;     /* セルの線を重ねる */
        empty-cells: show;

    }
    .t1 td {
        height: 1rem;
    }
    .t1 th,td {
        border: solid 1px;              /* 枠線指定 */
    }
    .t1 th{
        width: 100px;
    }
    .tablewrap{
        margin: 0 auto;
        position:relative;
        overflow:scroll;
        background-color: blueviolet;
        width: 70%;
        height: 200px;
    }
    .t1h, .t1main{
        width: 100vw;
    }
    .t1h{
        background-color: coral;
        position:sticky;
        top:0;
        left:0;
        /* position: absolute;
        top:0;
        left:0; */
    }
    .t1main td,.t1main th{
        height: 30px;
    }

</style>
<body>
    <div class="container">
        <div class="wrap">
            <div class="nav">
                <!-- <div class="link">
                    <ul>
                        <li><button>リンク１</button></li>
                        <li><button>リンク２</button></li>
                        <li><button>リンク３</button></li>
                        <li><button>リンク４</button></li>
                        <li><button>リンク５</button></li>
                    </ul>
                </div> -->
            </div>
            <div class="main">
                <div class="mainsub">
                    <div class="tablewrap">
                        <div class="t1h">
                            <table class="t1">
                                <tr>
                                    <th>ああああ</th>
                                    <th>いいいい</th>
                                    <th>うううう</th>
                                    <th>ええええ</th>
                                    <th>おおおお</th>
                                </tr>
                            </table>
                        </div>
                        <div class="t1main">
                            <table class="t1">
                                <tr>
                                    <th>test</th>
                                    <th>sample</th>
                                    <th>sample2</th>
                                    <th>sample3</th>
                                    <th>sample4</th>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>samplesample</td>
                                    <td>samplesample</td>
                                    <td>samplesample</td>
                                    <td>samplesample</td>
                                    <td>samplesample</td>
                                </tr>
                                <tr>
                                    <td>samplesample</td>
                                    <td>samplesample</td>
                                    <td>samplesample</td>
                                    <td>samplesample</td>
                                    <td>samplesample</td>
                                </tr>
                                <tr>
                                    <td>samplesample</td>
                                    <td>samplesample</td>
                                    <td>samplesample</td>
                                    <td>samplesample</td>
                                    <td>samplesample</td>
                                </tr>
                                <tr>
                                    <td>samplesample</td>
                                    <td>samplesample</td>
                                    <td>samplesample</td>
                                    <td>samplesample</td>
                                    <td>samplesample</td>
                                </tr>
                            </table>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</body>
</html>
```