みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。
１分で理解できるHTML/CSS講座シリーズです。
今回はテーブルのヘッダを固定してスクロールする方法について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
この記事を読むと・・・
- 1分でヘッダを固定してスクロールするテーブルが作れる！
１分で理解できるHTML/CSS講座シリーズはじめっ！
ヘッダを固定してスクロールするテーブルを作ろう！
やるべきこと
ヘッダを固定してスクロールするためにすることは以下です
- 親要素で高さを設定する
- 親要素でoverflowを設定
- thを固定する
- thに背景色を設定
これでできるよ！
実際に動かしてみよう！
See the Pen
テーブル ヘッダーを固定してスクロール by same-hack (@same-hack)
on CodePen.
動かしてみてね！
まとめ
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
