変奏現実

1.  position: sticky;  top: 0;

tableタグの上にタイトル行（ thエレメント、tdエレメント ）をしがみ付かせる方法。

このルールを trエレメントに付けてもあっさりスクロールしてしまう。

th エレメント やtd エレメント に１つづつ付けなくてはいけないので、列が多いと大変だから、

thead.hogeTable th,  thead.hogeTable td {
  position: sticky;
  top: 0;
}

な感じのCSSにすると良いと思う。

但し、この方法では、

• thやtdの境界線はスクロールしてしまう
• rowspanを使っている場合に２行目以降はロックしてくれない。

2. position: absolute;  top: nnnnpx;

画面にタイトル行（trエレメント）をネジ止めする方法。

thead.hogeTable tr {
  position: absolute;
  top: 0;
}

テーブルの位置が変わるとcssを修正しないといけないのがメンドイ。

だが、topを指定しないと、勝手にtableエレメントの上に固定してくれるので、これが案外楽かもしれない。

但し、この方法でも、

• thやtdの境界線はスクロールしてしまう
• rowspanを使っている場合に２行目以降は位置の微調整が大変。

なのは同じ。

3.javascriptで何とかする方法

ググれば色々と多数存在するので割愛するが、どれもスクロールバーのイベントに合わせて、Theadエレメントの位置を調整するもの。

それよりも、こそ－りと、THead部分をコピって別レイヤに貼り付ける方が楽な気がするのはボクだけだろうか？

テキスト内容で列幅が変わるのが気になるなら、元テーブルのtheadの各thの onresize イベントをフックして書き換えればいいような気がする。