テーブルのユーザビリティを飛躍的に向上させる「Chromatable」。
Chromatableはテーブルのヘッダーを固定させ、テーブルの要素にスクロールバーを付けることができるjQueryプラグインです。

普通のテーブル


Chromatableで初期化


次のようにスクロールしてもヘッダー位置はそのままで非常に分かりやすい。



実装方法

実装方法も超簡単で、JSコード自体はたったの１行で実装可能。

<!-- ライブラリ読込み -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.chromatable.js"></script>

<!-- 初期化方法１ -->
<script>
$(document).ready(function(){
    $("#yourTableID").chromatable(); // 初期化
});
</script>

<!-- 初期化方法２：オプション指定 -->
<script>
$("#yourTableID2").chromatable({ // オプションを指定して初期化
    width: "900px",
    height: "400px",
    scrolling: "yes"
});
</script>

仮にJavaScript がオフでも素のテーブルが表示され、問題にはなりません。

以下のエントリを参照してください。
Chromatable JQuery Plugin | Chromaloop

関連エントリ

• jQueryベースの多機能グリッドテーブル「DataTables」
• テーブル操作に使えそうなjQueryプラグイン色々
• 折りたたみできるクールなテーブル実装ができるjQueryプラグイン「jExpand plugin」