質問: Excelの「ウィンドウ枠の固定」のようにTableのヘッダ行や列を固定したいです。 colspanやrowspanを用いてセル結合しているTableでも適用可能な手法やライブラリはあるでしょうか?
回答: マークアップ済みの `table` 要素に少し細工するレベルでは実現できないので、Handsontable を使うのはどうでしょうか。 詳細 「あらかじめマークアップ済みの、一つの `table` 要素で表現されるテーブルに対して」という前提を置く場合、ヘッダ行の固定だけであれば CSS の `float` プロパティをうまく使えばできますが (「ヘッダ固定 thead float」などでググると出てくるはず) 、それと同時に行の固定、さらに `colspan` ・ `rowspan` 属性を用いる条件下では、多分実現方法はないです。 ヘッダ行や列の固定をするためには、次の4つの領域を表す **別々の `table` 要素** を組み合わせて表現する方法がよく採られているように思います。 1. 固定ヘッダ行部 2. 固定列部 3. 固定ヘッダ行と固定列の重複部 4. スクロール可能部 その上で、JavaScript でスクロール可能部の `scroll` イベントの発火に合わせてスクロールの追従が必要な領域をスクロールさせることで一応実装できます。ですがセルの縦幅・横幅を合わせたり、スクロールを制御するのは正直かなり面倒臭いです。 Handsontable は上記の4つの `table` 要素を使うアイデアで実装されており、その `table` 要素内には `colspan` ・ `rowspan` 属性も使われています () 。 ただし、ライブラリを使う場合はJavaScriptでデータを入力する必要があるため、あらかじめHTMLをマークアップしておくことはできません。 なお、その他の高機能なテーブル関連のライブラリ (SlickGrid など) は、`table` 要素を使わずに各セルを `div` 要素で表現しているものが多いです。そのようなライブラリでは `colspan` ・ `rowspan` 属性のような効果を得ることができません。