・今はこれがとても簡単に実現できるようになっている。
・position:stickyとtop:0を指定するだけ。
使い方
・先頭行固定
#table1 th {
background: white;
position: sticky;
top: 0;
}
・先頭行列、両方を固定
table.st-tbl1{
width: 1000px;
/*見切れるように1000pxにしている*/
}
.st-tbl1 thead th {
/* 縦スクロール時を固定 */
position: sticky;
top: 0;
/* tbody内のセルより手前に表示する */
z-index: 1;
}
.st-tbl1 th:first-child {
/* 横スクロールを固定 */
position: sticky;
left: 0;
background: #f1f1fd;
}
.st-tbl1 thead th:first-child {
/* 一番左端のthead thが横スクロール時に隠れない様に */
z-index: 2;
background: #424242;
}
参考
https://lpeg.info/html/th-sticky.html