Tableのヘッダ固定、列固定


Excelの「ウィンドウ枠の固定」のようにTableのヘッダ行や列を固定したいです。
colspanやrowspanを用いてセル結合しているTableでも適用可能な手法やライブラリはあるでしょうか？




マークアップ済みの `table`
要素に少し細工するレベルでは実現できないので、[Handsontable](http://handsontable.com/index.html)
を使うのはどうでしょうか。

## 詳細

「あらかじめマークアップ済みの、一つの `table` 要素で表現されるテーブルに対して」という前提を置く場合、ヘッダ行の固定だけであれば CSS の
`float` プロパティをうまく使えばできますが (「ヘッダ固定 thead float」などでググると出てくるはず) 、それと同時に行の固定、さらに
`colspan` ・ `rowspan` 属性を用いる条件下では、多分実現方法はないです。

ヘッダ行や列の固定をするためには、次の4つの領域を表す **別々の`table` 要素** を組み合わせて表現する方法がよく採られているように思います。

  1. 固定ヘッダ行部
  2. 固定列部
  3. 固定ヘッダ行と固定列の重複部
  4. スクロール可能部

その上で、JavaScript でスクロール可能部の `scroll`
イベントの発火に合わせてスクロールの追従が必要な領域をスクロールさせることで一応実装できます。ですがセルの縦幅・横幅を合わせたり、スクロールを制御するのは正直かなり面倒臭いです。

[Handsontable](http://handsontable.com/index.html) は上記の4つの `table`
要素を使うアイデアで実装されており、その `table` 要素内には `colspan` ・ `rowspan` 属性も使われています
(<http://handsontable.com/demo/merge_cells.html>) 。
ただし、ライブラリを使う場合はJavaScriptでデータを入力する必要があるため、あらかじめHTMLをマークアップしておくことはできません。

なお、その他の高機能なテーブル関連のライブラリ ([SlickGrid](https://github.com/mleibman/SlickGrid)
など) は、`table` 要素を使わずに各セルを `div` 要素で表現しているものが多いです。そのようなライブラリでは `colspan` ・
`rowspan` 属性のような効果を得ることができません。




マークアップ済みの `table`
要素に少し細工するレベルでは実現できないので、[Handsontable](http://handsontable.com/index.html)
を使うのはどうでしょうか。

## 詳細

「あらかじめマークアップ済みの、一つの `table` 要素で表現されるテーブルに対して」という前提を置く場合、ヘッダ行の固定だけであれば CSS の
`float` プロパティをうまく使えばできますが (「ヘッダ固定 thead float」などでググると出てくるはず) 、それと同時に行の固定、さらに
`colspan` ・ `rowspan` 属性を用いる条件下では、多分実現方法はないです。

ヘッダ行や列の固定をするためには、次の4つの領域を表す **別々の`table` 要素** を組み合わせて表現する方法がよく採られているように思います。

  1. 固定ヘッダ行部
  2. 固定列部
  3. 固定ヘッダ行と固定列の重複部
  4. スクロール可能部

その上で、JavaScript でスクロール可能部の `scroll`
イベントの発火に合わせてスクロールの追従が必要な領域をスクロールさせることで一応実装できます。ですがセルの縦幅・横幅を合わせたり、スクロールを制御するのは正直かなり面倒臭いです。

[Handsontable](http://handsontable.com/index.html) は上記の4つの `table`
要素を使うアイデアで実装されており、その `table` 要素内には `colspan` ・ `rowspan` 属性も使われています
(<http://handsontable.com/demo/merge_cells.html>) 。
ただし、ライブラリを使う場合はJavaScriptでデータを入力する必要があるため、あらかじめHTMLをマークアップしておくことはできません。

なお、その他の高機能なテーブル関連のライブラリ ([SlickGrid](https://github.com/mleibman/SlickGrid)
など) は、`table` 要素を使わずに各セルを `div` 要素で表現しているものが多いです。そのようなライブラリでは `colspan` ・
`rowspan` 属性のような効果を得ることができません。

