回答編集履歴
1
質問を読み違えていたので修正
test
CHANGED
|
@@ -117,3 +117,21 @@
|
|
|
117
117
|
|
|
118
118
|
|
|
119
119
|
[https://codepen.io/haruyan-hopemucci/pen/poeEoOB](https://codepen.io/haruyan-hopemucci/pen/poeEoOB)
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
### 追記
|
|
124
|
+
|
|
125
|
+
1列目と「2行目」の複合固定が希望だったのですね。読み違えていました。
|
|
126
|
+
|
|
127
|
+
行側の固定も、列側と同じようにtd要素、th要素に対して `position: sticky` をつけ、適切にtop値を設定すれば複数行の固定も可能です。（2行目のtopは1行目のheightを加算していきます）
|
|
128
|
+
|
|
129
|
+
また、行側のヘッダと列側のヘッダが交差する場合どちらを上にするかは、z-indexを細かく設定して決めましょう。
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
コードが長くなったのでcodepenのデモで確認してください。同じpenに再実装しています。
|
|
134
|
+
|
|
135
|
+
[https://codepen.io/haruyan-hopemucci/pen/poeEoOB](https://codepen.io/haruyan-hopemucci/pen/poeEoOB)
|
|
136
|
+
|
|
137
|
+
デモでは2行2列分の複合固定となっております。
|