tableタグの多段ヘッダの固定方法が知りたい

Question

tableタグで、上部のヘッダをスクロールしても固定したいのですが、
rowspanを利用した多段になってるヘッダだと、2段目（赤枠部分）の固定が
うまくできず困ってます。

このテーブルの各セルには幅・高さ指定がなく、テーブル全体は領域の横幅いっぱいの幅をとります。
なので、ブラウザウィンドウ幅によって、テーブルサイズ、中のセルのサイズが変化します。

1段目のセルの高さpxを指定し、2段目のヘッダセルをtopプロパティで1段目の高さの数値を入れれば
正しく固定されるみたいなのですが、
可能ならば各セルのサイズを可変のまま（幅・高さの指定をしない）で正常な固定ヘッダの実現をしたいのです。

ウィンドウサイズによってセルのサイズが変わるわけですが、
それに合わせてのtopプロパティの値を動的に変化させる方法ってCSSにありましたっけ、このようなことを実現する方法のご教示をお願いいたします

Comments

[m.ts10806]

「うまくできず」と仰いますが、質問内には画像と文章しか提示されていません。何をして何が起きているのでしょうか。具体的に記載してください。
また、テーブルヘッダ固定のプラグインは多数あるかと思います。それらは何一つ採用検討しなかったのはどういう理由からでしょうか。

Answer 1

position sticky ヘッダー
で検索するのをオススメします。
IE対応はJavascript使うしかないっぽいです。

https://teratail.com/questions/281334#reply-400437