HTMLテーブルの縦横を固定にしてデータを見やすく「Super Tables」
Super TablesはJavaScript製のオープンソース・ソフトウェア。業務システムをはじめ、レポート出力等で多用されるのがテーブル組みだ。縦横に長いデータを表示する場合、表計算ソフトウェアであればヘッダ部を固定表示にする。そうすればスクロールしても何の項目かすぐに分かる。
中央に表示されているテーブル
だが素のままのHTMLではそのような柔軟な表示は行えない。そのためシステムによっては10行ごとにヘッダを繰り返し挿入したりする。だがそれも再利用性が悪くなるだろう。そこで使ってみたいのがSuper Tablesになる。
Super Tablesを使うとテーブルの縦方向ヘッダを固定にしてスクロールしても常に表示される。さらに横方向のヘッダも固定になり、一番左側のカラムが常に表示されるようになる。テーブルのユニークになるIDを常に表示したりすると便利だ。
実際のデータ。普通のテーブル組。
使い方はテーブルのIDを指定するだけで簡単だ。特にHTML側で特殊な形式を設定する必要はない。さらに複数ヘッダ、複数カラム固定に対応している。スキンに対応し、サイトの色遣いに合わせて自由に変更できる。対応ブラウザはFirefox2以上、IE5.5以上、Safari3以上、Opera9以上、Google Chromeとなっており幅広い。
執筆時のバージョン
0.30
Super Tables - HTML Tables with Fixed Headers and More - Matt’s 411 - Javascript, CSS, HTML and more