jquery.tablefix.js

»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 の項) で公開します。

109 thoughts on “jquery.tablefix.js

  1. 管理人様、便利なプラグインを公開してくださってありがとうございます。
    使わせていただいて、長い表を見るのにとても便利になりましてありがとうございました。
    質問よろしいでしょうか。表の中にテキストボックスなどを入れて、CGIを使ってデータを取り出したいのですが、この表の中にテキストボックスなどを配置するとデータを取り出すことができないようです。
    CGIを使うにも問題ないようにするには、どこを修正したらよろしいでしょうか。
    教えていただけましたら大変助かります。どうぞよろしくお願いいたします。

  2. ASP.NET Gridviewにてフィールド(セル?)に入っている値が4重複に表示されてしまいます。

    例:セルに 2 が入っている場合に「編集」をくりっくすると 2,2,2,2 となってしまいます。

  3. テーブル内のフォームについては、現在の実装では非対応な状態です。いつか次バージョンを作成することがあれば検討したいと思います。

  4. ASP.NET の Gridview なるものがどういったものか分からないので、申し訳ありませんが確認のしようがありません。
    名称から想像するに、ASP.NET 側でもテーブルを操作する何らかのスクリプトが動作していて、それと競合しているのではないかと思います。

  5. 素敵なものを作っていただきましてありがとうございます。かっこいい表ができる気がしてワクワクしています。

    ひとつお尋ねしたいのですが、生成時に指定した高さ以上にデータがあるときはいいのですが、データが少ないと横方向のスクロールが表示されなくなってしまいます。
    どうしたらいいでしょうか? アドバイスをいただけると助かります。

    お忙しいところお手数をおかけしますが、どうぞよろしくお願いいたします。

  6. DownLoadしまして、試してみましたが、縦方向がうまくスクロールバーができてスクロールできましたが、
    横方向がスクロールバーがでなく、スクロールできないですが、解決方法がありますでしょうか?ちなみに使っているのはIE11

  7. まず詳しい状況がよく分からないので原因が分からないのと、もう古くなってしまったこのプラグインに関して現在積極的な対応は行っていないので、申し訳ないですがこれといった回答は出来ないです。

  8. 縦横スクロール時、横スクロールを一番右に持っていくと、ヘッダと内容がズレます。
    (サンプルでもそうなっています)
    これを無くす手だてはないものでしょうか?

  9. 大変申し訳ありませんが、現状、こちらのプラグインに時間を割くモチベーションがないためすぐに直す見込みはありません。その他にもいくつか問題点が見つかっているので、将来的にバージョン 2 を開発することがあれば、もろもろ修正できるかと思います。

コメントを残す

メールアドレスが公開されることはありません。