この記事は

お久しぶりじゃの。
コロナの影響でリモートワークになったけど、そこそこ忙しくて記事を書けない日々が続いていたハシビロコウだぞい。
適度に忙しいと秒で時間が過ぎるから最高じゃのう。

今回は、
ヘッダー（thead）が上に固定されていて、tbody部分のみスクロールバーで上下に動かせるテーブルを依頼されることが多かったので、備忘録として解説とともに残していくぞい。

ちなみに、完成するとこんな感じになるぞ。

See the Pen
ヘッダーが上にひっつくテーブル（完成版） by mame_hashbill (@mayu-mameuda)
on CodePen.

HTML

HTMLの構造はこんな感じ。
普通のtableをdivで囲う感じなので簡単だぞ。

<divclass="table-wrap"><table><thead><tr><th>TITLE</th><th>TITLE</th><th>TITLE</th></tr></thead><tbody><tr><td>HOGEHOGE</td><td>HOGEHOGE</td><td>HOGEHOGE</td></tr><!-- ...以下省略(同じtrが続く) --></tbody></table></div>

Scss

そしてScssはこんな感じじゃ。

//変数$green:#3cb371;table{width:100%;border-collapse:collapse;//ポイント①}th,td{letter-spacing:0.1em;padding:5px10px;}th{position:sticky;//ポイント②top:0;//ポイント②width:calc(100%/3);background:$green;color:white;font-size:20px;}td{background:rgba($green,0.8);color:white;font-weight:bold;border-top:1pxsolidwhite;}.table-wrap{height:200px;//ポイント②overflow:auto;//ポイント②&::-webkit-scrollbar{//スクロールバーの横幅指定　ポイント③width:15px;}&::-webkit-scrollbar-track{//スクロールバーの背景色・角丸指定　ポイント③background:lighten($green,0.4);}&::-webkit-scrollbar-thumb{//スクロールバーの色・角丸指定　ポイント③background-color:darken($green,10%);border:3pxsolidlighten($green,0.4);border-radius:10px;}}

ポイント別解説

ポイント①　`border-collapse: collapse;`

左右にborderのないお洒落な？テーブルを作りたい場合は、こいつを入れてあげる必要があるぞい。

border-collapse: collapse;は、隣接するボーダーラインを重ねあわせて表示させる指定のようなんだが、なんでこれをやらないと左右の線が出てしまうのかはよくわからん。

ポイント②　`position: sticky;`

.table-wrap{height:200px;overflow:auto;}th{position:sticky;top:0;}

この記述がスクロール可能なテーブルを作るための指定だぞい。
heightでスクロールさせるテーブルラップの高さを決めて、中のテーブルがそれ以上の高さならスクロールさせるように、overflow: auto;と指定するぞい。

thに指定してる2行で、ヘッダーが上にぴとっとくっついたまま、tbody内だけがスクロールするようになるぞ。

ちなみに、theadとかtrとかにつけても、stickyは作動しないので要注意。

あと、親とか先祖とかにoverflow:hidden;がいてもstickyは作動しないので注意。

sticky使いそうなページがあったらoverflow:hidden;はマジでしないほうがいい。
私はこいつのせいで何度か泣きそうになった。

ポイント③　スクロールバー

これは書かなくてもスクロールできるテーブル自体はできてるんだが、
スクロールできるよってのを示すためにスクロールバーをつけておきたいって人は覚えておくといいぞい。

ちなみにこれでスクロールバーの色とか太さとか丸みとかを変えることができるので、一気にお洒落？なスクロールバーを使ったテーブルを作ることができるぞ。

.table-wrap{&::-webkit-scrollbar{//スクロールバーの横幅指定width:15px;}&::-webkit-scrollbar-track{background:lighten($green,0.4);//スクロールバーの背景色//今回は指定してないけどborder-radiusも指定できるぞ}&::-webkit-scrollbar-thumb{background-color:darken($green,10%);//スクロールバーの色border:3pxsolidlighten($green,0.4);//スクロールバーの枠線border-radius:10px;//スクロールバーの角丸}}