Excelの「ウィンドウ枠の固定」のようにTableのヘッダ行や列を固定したいです。 colspanやrowspanを用いてセル結合しているTableでも適用可能な手法やライブラリはあるでしょうか?
5 件の回答
マークアップ済みの table
要素に少し細工するレベルでは実現できないので、Handsontable を使うのはどうでしょうか。
詳細
「あらかじめマークアップ済みの、一つの table
要素で表現されるテーブルに対して」という前提を置く場合、ヘッダ行の固定だけであれば CSS の float
プロパティをうまく使えばできますが (「ヘッダ固定 thead float」などでググると出てくるはず) 、それと同時に行の固定、さらに colspan
・ rowspan
属性を用いる条件下では、多分実現方法はないです。
ヘッダ行や列の固定をするためには、次の4つの領域を表す 別々の table
要素 を組み合わせて表現する方法がよく採られているように思います。
- 固定ヘッダ行部
- 固定列部
- 固定ヘッダ行と固定列の重複部
- スクロール可能部
その上で、JavaScript でスクロール可能部の scroll
イベントの発火に合わせてスクロールの追従が必要な領域をスクロールさせることで一応実装できます。ですがセルの縦幅・横幅を合わせたり、スクロールを制御するのは正直かなり面倒臭いです。
Handsontable は上記の4つの table
要素を使うアイデアで実装されており、その table
要素内には colspan
・ rowspan
属性も使われています (http://handsontable.com/demo/merge_cells.html) 。
ただし、ライブラリを使う場合はJavaScriptでデータを入力する必要があるため、あらかじめHTMLをマークアップしておくことはできません。
なお、その他の高機能なテーブル関連のライブラリ (SlickGrid など) は、table
要素を使わずに各セルを div
要素で表現しているものが多いです。そのようなライブラリでは colspan
・ rowspan
属性のような効果を得ることができません。
スプレッドシートが必要なプロダクトでHandsontableというライブラリを使った事があります。
jQueryのtbodyScrollというプラグインやjquery.tablefix.jsというものがあるようです。
jquery.tablefix.js:http://www.otchy.net/javascript/tablefix/
FixedMidashiというものもあるようです。
ドキュメントが日本語。
rowspan 属性を使っても問題ないようです。colspanは未確認。(http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/demo_div_full_iframe.html) Handsontable と似た実装なのかもしれません。
テーブルのヘッダー固定は、軽いのから重いのまで色々なライブラリがありますが、 どれも一長一短な気がしますねー。
軽いのだと、このあたりとか fixedTblHdrLftCol ( jQuery plugin )
重いのだと、このあたりとか
SmartClient ( 無料で使えるExt.jsのようなもの )
View hands on demo → Live Grid でデモを見れます。