jquery.tablefix.js2010-03-08

»Download

jquery.tablefix.js は、Excel のウィンドウ枠固定のように、テーブルのヘッダや左側を固定して、残りの部分をスクロールさせるための、jQuery プラグインです。

JavaScript 無効時はただのテーブルとして普通にそのまま表示される点と、他の類似品と違ってソート変更などの高度な機能がない代わりに、すでにデザイン済みの任意のテーブルにそのまま適用出来る点が特徴です。
読み込むのはプラグインだけで、追加の css や画像ファイルは必要ありません。

使い方

1. 普通にテーブルをデザインする
2. jQuery とプラグインを読み込む
3. jQuery のセレクタでテーブルを選択して、プラグインを呼び出す

これだけで、あとはプラグインがよかれにやってくれます。

プラグインの呼び出し方

$('tableSelector').tablefix({width: 600, height: 400, fixRows: 1, fixCols: 2});

指定可能なオプション

width

テーブル全体がこの横幅に収まるようにします。

height

テーブル全体がこの縦の長さに収まるようにします。

fixRows

テーブル上部で固定するヘッダの行数を指定します。

fixCols

テーブルの左側で固定する列数を指定します。

オプションは全てを設定する必要はありません。
例えば height と fixCols を指定しなければ、縦の長さは元のテーブルのまま横スクロールだけが発生し、固定列は無くテーブル全体が横スクロールします。
また、width / height を両方とも指定しない場合や、指定した width / height が元々のテーブルサイズよりも大きい場合など、固定スクロールを必要としない場合は、無理にスクロールを追加したりしません。

サンプル

HTML

<table id="tablefix1">
    <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>
<br />
<table id="tablefix2">
    <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>
    </tbody>
</table>
<br />
<table id="tablefix3">
    <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>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    </tbody>
</table>

JavaScript

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

実行結果

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

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

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

制限事項

• テーブルの中にフォームが含まれるとフォーム自体が誤動作する可能性があります。
• テーブルに colspan ã‚„ rowspan が含まれる場合、その位置によっては正しく動作しない場合があります。
• jQuery 1.2 系では動作しません。1.3 系、1.4 系で動作するはずです。

技術的な話

既存の様々な実装を参考にしつつ、固定スクロールを実現するために、以下のような方法を使っています。
細かい部分は省いていますが、概ねこんな感じです。

1. 元のテーブルから、スクロールさせる原点となる座標を求める。
2. テーブルを 3 つコピーして、全部で 4 つの全く同じテーブルを用意。
3. 全体を 1 つの div で囲い、さらに 4 つのテーブルの周りをそれぞれまた div で囲う。
4. 全体の div に対しては、"relative"、4 つの div は "absolute" に position を指定。
5. 4 つの div がそれぞれ、左上固定部 / 上固定行 / 左固定列 / スクロール部 になるよう、スクロール原点に合わせて、left と top を動かす。
6. 4 つの div それぞれに、画面上に見せたい範囲の width と height を設定する。
7. 上固定行 / 左固定列 / スクロール部 については、見えてはいけない部分を隠すため、ネガティブマージンを設定する。
8. 上固定行 / 左固定列は、overflow を hidden にして、スクロールをスクロール部と同期させる。

更新履歴

2010-03-08 [Ver 1.0.0]

初版リリース

2013-06-13 [Ver 1.0.1]

複数のエレメントに対して適用した際に、width と height が少しずつずれていく問題を修正。

ライセンス

ライセンスは MIT License (日本版 wikipedia の項) で公開します。