3

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

5 件の回答 5

4

マークアップ済みの table 要素に少し細工するレベルでは実現できないので、Handsontable を使うのはどうでしょうか。

詳細

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

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

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

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

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

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

2

スプレッドシートが必要なプロダクトでHandsontableというライブラリを使った事があります。

ただしモバイル対応が不完全なので、有償でもよければWijmoSpreadJSなどを使った方がいいかもしれませんね。

1

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

jquery.tablefix.js:http://www.otchy.net/javascript/tablefix/

1

FixedMidashiというものもあるようです。

ドキュメントが日本語。

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

1

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

軽いのだと、このあたりとか fixedTblHdrLftCol ( jQuery plugin )

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

0

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。