概要
下記のようなヘッダーが階層化(グルーピング)されているテーブルがあります。(下記図のようなテーブル)
そんなテーブルのヘッダーを固定してスクロールできるようにします。
試行錯誤しながらHTML・CSSで実装したので記録として残します。
実装方法
position: sticky と z-index で固定と重なったときを制御します。
私のクラスの振り方が悪いのかもしれませんが、何を対象にするか・しないかに注意しないと固定化されなかったり重なったときの振る舞いが効かなかったりします
See the Pen fool-table by masayasviel (@masayasviel) on CodePen.
おわりに
topとleftの固定位置で幅と高さが若干縮むので、ボーダーを消して背景色のみにして誤魔化すとかtopとleftを調整するとかしてください。