テーブルのヘッダを固定してスクロールする jQuery プラグイン2010-03-08

Excel のウィンドウ枠の固定のように、テーブルのヘッダや左側を固定して、残りの部分をスクロールさせるための jQuery プラグインを書きました。
マークアップはシンプルで、普通にテーブルを書いたら、jQuery の作法でプラグインを呼び出すだけです。

jQuery のおれおれプラグインはいくつか書いた事がありましたが、こうやって公開するのは初めてです。ごてごての機能が欲しいんじゃなくて、単に既存のテーブルを固定スクロール化したいだけの時に、いいのが見つからなくて書いたので、けっこうニーズがあるんじゃないかと思ってます。

下記は簡単なサンプルです。詳細は専用ページを見てみて下さい。

HTML

<table id="tablefix">
    <thead>
    <tr>
        <th rowspan="2">ヘッダA</th>
        <th rowspan="2">ヘッダB</th>
        <th colspan="2">ヘッダC</th>
        <th rowspan="2">ヘッダD</th>
        <th rowspan="2">ヘッダE</th>
    </tr>
    <tr>
        <th>ヘッダ C-1</th>
        <th>ヘッダ C-2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    </tbody>
</table>

JavaScript

$(function() {
    $('#tablefix').tablefix({width: 500, height: 200, fixRows: 2, fixCols: 2});
});

実行結果

ヘッダA	ヘッダB	ヘッダC		ヘッダD	ヘッダE
		ヘッダ C-1	ヘッダ C-2
データ	データ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ
データ	データ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ
データ	データ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ
データ	データ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ
データ	データ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ