1804


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


CC BY-SA 3.0
2014-12-16T14:29:40.877
1787
2015-01-05T22:53:10.340
3925
question
javascript css
Tableのヘッダ固定、列固定


jQueryのtbodyScrollというプラグインやjquery.tablefix.jsというものがあるようです。

jquery.tablefix.js：<http://www.otchy.net/javascript/tablefix/>


CC BY-SA 3.0
2014-12-16T15:31:51.927
1793
2014-12-16T15:31:51.927
4069
1787
answer


スプレッドシートが必要なプロダクトで[Handsontable](http://handsontable.com/demo/scroll_window.html)というライブラリを使った事があります。

ただしモバイル対応が不完全なので、有償でもよければ[Wijmo](http://wijmo.c1.grapecity.com/)の[SpreadJS](http://wijmo.c1.grapecity.com/widgets/wijmo-
enterprise/spreadjs/)などを使った方がいいかもしれませんね。


CC BY-SA 3.0
2014-12-16T15:37:02.593
1795
2014-12-16T18:05:56.080
2014-12-16T18:05:56.080
3277
3277
1787
answer


マークアップ済みの `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` 属性のような効果を得ることができません。


CC BY-SA 3.0
2014-12-16T16:46:09.863
1804
2014-12-16T16:46:09.863
3158
1787
answer


テーブルのヘッダー固定は、軽いのから重いのまで色々なライブラリがありますが、 どれも一長一短な気がしますねー。

軽いのだと、このあたりとか [fixedTblHdrLftCol](http://webkaru.net/jquery-
plugin/fixedtblhdrlftcol/) ( jQuery plugin )

重いのだと、このあたりとか [SmartClient](http://smartclient.com/product/smartclient.jsp) (
無料で使えるExt.jsのようなもの )  
View hands on demo → Live Grid でデモを見れます。


CC BY-SA 3.0
2014-12-17T04:58:03.000
1864
2014-12-17T16:02:52.327
2014-12-17T16:02:52.327
33
4422
1787
answer


[FixedMidashi](http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/index.html)というものもあるようです。

ドキュメントが日本語。

rowspan
属性を使っても問題ないようです。colspanは未確認。（<http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/demo_div_full_iframe.html>）
Handsontable と似た実装なのかもしれません。


CC BY-SA 3.0
2014-12-17T14:48:50.017
1934
2014-12-17T14:48:50.017
3925
1787
answer