tableのヘッダを固定して縦スクロールさせる（position: sticky）

tableのヘッダ（thead）を固定して縦スクロールをしたかった。
だけど、なんか上手くいかなかった。スクロールがtbody部に食い込んだり、レイアウトが崩れたり。一番理想の挙動に近かったのがposition: sticky法。

こんな感じに動く

はてブさんのスタイルも適用されてるので実際のデザインとは違うけど、おおまかにこんな感じに動きます。

A	B	C	D	E
AA	BBBB	CCCC	DDDDDDD	EEE
AA	BBBB	CCCC	DDDDDDD	EEE
AA	BBBB	CCCC	DDDDDDD	EEE

html

<table class="table_sticky">
    <thead>
        <tr>
            <th>ID</th>
            <th>名前</th>
            <th>生年月日</th>
            <th>住所</th>
            <th>電話番号</th>
        </tr>     
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>sample name1</td>
            <td>YYYY/MM/DD</td>
            <td>北海道札幌市中央区北●条西▲丁目</td>
            <td>011-XXXX-XXXX</td>
        </tr>
    </tbody>
</table>

CSS

table th ,td {
    border:1px solid;
    }
     
/*　スクロールバーの実装 */
.table_sticky {
    display: block;
    overflow-y: scroll;
    height: calc(100vh/2);
    border:1px solid;
    border-collapse: collapse;
}
.table_sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: gold;
    border-top:#FFFFFF;
}

必要最低限のCSSなので、あとはいい感じに調整して下さい。

• top: 0; でヘッダを上部に固定。
  
• z-index: 1; で重なり位置を一番手前に。
  
• background: gold; でヘッダの背景に色を付けてあげないと、奥に回り込んだtbody部がスケスケに丸見えです。白でも何色でもいいです。
  
• border-top:#FFFFFF; は無くてもいいかもしれませんが、環境によっては奥に回り込んだtbody部がヘッダの上部から1pxチラ見えしちゃうので白線を引いておきます。原因を考える元気はいまありません（・ω・`
  

コレ、th要素じゃなくてthead要素で指定すると動かないんですよね。感覚的にヘッダの塊（thead）を上部に固定できそうだなと思うのに。

widthとheightで幅と高さを指定するのは必須です。スクロールバーが出る、つまりはみ出たものがあるってことは領域（幅と高さ）が指定されてるってことなので。
ただ私は、tableの幅は指定しつつも幅を可変にしたいセルがあったので、よく紹介されている手法が上手くいかなかったのかなーと思っています。

各ブラウザの対応については以下（最下部に対応表があります）

developer.mozilla.org

▼ありがとうございます！
coliss.com

リンク