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

118 thoughts on “jquery.tablefix.js

  1. コメントの内容だけでは状況がよく分からないですが、何らか別のプラグインか何かでしょうか?
    「技術的な話」として挙げているように、元々のテーブルを 4 つにコピーして見かけを調整しているため、動的に書式を変更するようなライブラリなどとは、相性が悪いかと思います。
    また、同じ理由でテーブル内にフォームが含まれている場合も、上手く動作しない可能性がありますね。

  2. 利用させていただきました。ありがとうございます。

    FF 3.6 で見たところ、JS内の rowTable と bodyTable に設定した marginRight が反映されず、右にスクロールした際に最後の部分がずれてしまいます。
    上記サンプルでは #tablefix1 のみ上記事象が発生します。
    下マージンは正常に反映されております。

    私のほうでも修正をしようと思いましたが、対応できませんでした。。。
    よろしければ何かアドバイスをいただけますと幸いです。

  3. 自己フォローです。
    rowTable と bodyTable を float:left したところ正常に描画されていました。

  4. 報告ありがとうございました。
    内容を確認してみます。

  5. サンプルのHTMLコードのテープルタグにclass=”tablefix”を追加しないと、動かない。

  6. 現在の画面上のサンプルは、id による jQuery のセレクタでうまく動作しているようです。
    class 指定による動作の変化については、理由がよくわかりませんが、現象を確認されたブラウザなどお教えいただければ、何かわかるかもしれません。

  7. ご返信、どうもありがとうございます。
    CSS指定もわかりました。
    大変助かりました。

  8. テーブル全体のリサイズは可能でしょうか?
    (画面リサイズでTableを自動リサイズ出来るように考えています。)
    試しにwidth,heightを変更して再度プラグイン呼び出ししたが変化なしでした。(IE6.0にて)

  9. 現状では、スクロール固定後のサイズ変更はサポートしていません。
    ただ、「技術的な話」のところで触れているように、もともとのテーブルを4つにコピーした上で、そのそれぞれを4つの窓から覗くような構成になっているため、その窓の大きさを後から変えれば、見える範囲(=見かけ上のテーブルの大きさ)を変えることは可能かと思います。
    プラグイン実行後のHTMLなど参考にしながら、お試し下さい。

  10. なかなか動かないと奮闘した結果、見本を参考にHTMLに書き込んでなかなか動かないと思っていたところ、ダウンロードしたjquery.tablefix.jsのにバージョンがあって、名前を直したらやっと動くようになりました。
    TSURUさんの通りtaleをfloat:left したところ正常に描画されました。ありがとうございます。

    私の作ったテーブルが縦にも横にも大きいので、同じページ内の上に戻るリンクを作りました。

    固定された左上のセルにname=””をつけて
    上に戻る のような 動作をさせると、固定された左上のセルの表示がおかしくなりました。
    固定されていない左上セルにも上記の動作をさせると、
    そのセルが固定セルのところに上書きされてしまいました。
    これに関してはこういうものなんでしょうか。
    テーブルの上に頭ひとつ出て表示される感じです。
    firefox3.6.11とIE7にて起こりました。

  11. 現状では、テーブルのセル内に name をつけて、ページ内リンクでスクロールさせる事は想定していません。
    表向き 1 つのテーブルのように見えていても、実際には 4 つのテーブルが存在しているため、上手く動作していないのだと思われます。

    テーブルの外側に、空の要素を追加してそこに name を指定するなどすれば、恐らく上手く動作するのでそういった方法をおためし下さい。

  12. 早速のご返答ありがとうございました。
    固定セル以外のページ内リンクもうまく動作しなかったので、
    これは使わないようにするしかないですね。

  13. うまく動きませんでしたか…。残念です。
    詳細検討する時間は取れないのですが、jQuery を使っていれば、スクロール系のプラグインなども利用可能なので、上手く解決できる事を祈っています。
    スクロール系プラグインだったら、要素の画面上の位置と、ウィンドウのスクロール状態から判定してスクロールを制御するはずなので、もしかしたら上手くいくかも知れないです。

  14. 参考にさせていただきました。
    最初利用したときにはレイアウトが崩れてしまったのですが、それはテーブルにmargin-topが指定してあることが原因だと発覚しました。margin-topが0でないとレイアウトがうまくいかないですね。

  15. 報告ありがとうございました。確かにそういった事が起こるようです。
    プラグインの仕組み上、テーブルをコピーしてから分割表示しているので、分割されたテーブルの中の計算が、マージンによってずれてしまっていたのだと思います。

  16. IE8にて#tablefix1が右いっぱいまでスクロールすると
    上の見出しとかなりずれます。

    CSSでtableのfloat:leftを記入した事によって
    firefoxとIE7では正常に描画されています。

    TSURU さんはrowTable と bodyTable を float:left したところ正常に描画されていました。

    とありますが、これはどこに記入すればよいですか?

    どう書けばいいのかわからないので教えていただければ幸いです。

  17. 左固定部分の幅を固定したいのですが、可能なのでしょうか?

  18. すみません、変な内容だったので書き直します。
    CakePHPでの検索結果一覧表示に、こちらを使わせていただいています。

    テーブルが途中で抜けて表示させるというケースもあって
    左固定部分の幅がずれてしまうという現象になっています。

    なんとか、左表示部分の幅を指定させたいのですが
    そういった事は可能でしょうか?

  19. >ももあんさん
    手元に今 IE8 がないので確認できないのですが、rowTable と bodyTable というのは、元々のテーブルをコピーして作ったテーブルなので、元々のテーブルに float:left が効いていれば、rowTable と bodyTable にも float:left が効いてくるはずではあります。
    明示的に指定する場合は、プラグイン適用後の DOM 構造を、Firefox の FireBug や Chrome のデベロッパーツールで確認して、jQuery.css などを利用するのが良いかと思います。

    >nassy さん
    元々のテーブルを全部で 4 つにコピーする仕組みで動作していますが、元々のテーブルのスタイルも原則的にはそのままコピーされるはずなので、テーブルのスタイルに table-layout:fixed を指定すると改善するかも知れないです。

  20. そう言う事なんですか。
    では特別にrowTable と bodyTableに
    さらにCSSなどを書かなくてもいい訳ですね。

    firefoxとIE7では正常に表示されているので
    すっかり大丈夫と思って使っていました。

    JAVAスクリプトには詳しくないので、
    IE8の互換表示にすればとりあえず解消されるので
    その注意書きを書いておくことにします。
    ありがとうございました。

  21. ie6では、動かないのでしょうか。構文エラーとなってしまいました。

  22. このページ自体を IE6 で開いてみましたが、特に構文エラーなどになる事はなく、正しく動作しました。
    確認されている状況で、IE6 のみ構文エラーが発生するとしたら、jquery.tablefix.js 以外の部分ではないかと思います。

  23. >ももあんさん

    テーブルのスタイルシートに
    float:left;
    をつけ加えると、テーブルのずれはなくなりました。
    firefoxでしか試してませんが。。

    #tablefix {
    width: 800px;
    border-collapse: collapse;
    border-spacing: 0;
      float:left;
    }
    #tablefix thead th {
    background-color: #333;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    }

  24. 表示していない(スクロールしないと見えない)データを検索(Ctrl+F)すると、表示が崩れてしまうのですが、何か解決方法はありますでしょうか?(IEのバージョンには依存しないと思いますが、IE6です)
    (ちなみに、Super Tables(http://www.matts411.com/post/super_tables/)でも列固定時に同様な現象が発生します。)
    よろしくお願い致します。

  25. 確かにそういう現象が発生するようですね。
    ただ、現状ではどうにも解決策が見つかりませんでした。もし解決策など見つかりましたら、教えていただけると助かります。

  26. テーブルのソーティング機能は対応可能なのでしょうか?

  27. 当プラグイン自体でそういった機能を提供する予定はありません。
    別のプラグインと組み合わせた場合の動作についてはどうなるか予想がつきませんが、table タグを操作するプラグイン同士は相性が悪いと思われるので、恐らく上手くいかないでしょう。
    当プラグインは「あらかじめデザインされたテーブルをシンプルにそのままスクロール可能にする」というコンセプトで作られているので、ソート機能など高度な機能が必要でしたら、他のプラグインを探してみた方が良いかと思います。

  28. 突然の質問で申し訳ありませんが、このプラグインはフッター固定のスクロールに対応できますでしょうか。

    このプラグインを活用させて頂こうと試用してみたのですが、フッター固定のスクロールには対応していない様で、フッターを追加するとスクロールが表示されなくなってしまいました。

    押し付けがましいお願いで恐縮ですが、フッター固定のスクロールに対応する方法等ありましたら、ご教授して頂けないでしょうか。
    (大変良くできたプラグインなので、是非とも活用したいと思っております。)

    宜しくお願い致します。

  29. 現状ではフッタの固定には対応しておりません。
    任意のテーブルでフッタに対応出来るようにしようとすると色々と困難で、ニーズとしてもそこまで高くないと言うのが理由です。

    見た目上、フッタ固定っぽい動作を実現しようとするならば、本来のテーブルの下にフッタに相当する別のテーブルを配置しておく、と言うのが次善の策になるかと思います。
    この場合、テーブルのスタイルで table-layout: fixed; を指定しておくと、本来のテーブルと、フッタ用のテーブルでセルの横幅を合わせやすいはずです。

  30. 上記のサンプル(html、JavaScript)と同じように作成したら、スクロールバーを表示しておりません。別に設定する必要がありますか?

  31. 上のサンプルでは省略されていますが、jQuery のプラグインですので大前提として jQuery の読み込みが必要になります。
    jQuery の読み込み自体は正常に行われている場合、デバッガなどで原因を検証する必要がありますが、個別の問題に対する対応は行っておりませんので、あらかじめご了承下さい。

  32. 開発コンセプトが、素晴らしいです。
    ただ、完成度は、個人的にはイマイチです。m(_ _)m

    改善事項
    1.// 偶数行の色を設定
    $(‘table#TBL tr:even’).css(‘background-color’, ‘#efefef’);
     Google Chromeでは機能しませんね。

    2.先頭行を0と仕様変更していただきたいです。
     なぜなら、jQueryの書式で、そう定義している(と思いますので)。

    3.//フィールド行の背景色
    $(‘table#TBL THEAD tr:eq(0)’).css(‘background-color’, ‘#ababab’);
     これでも、eq(1) にしてあげないと、発効しないのです。

    4.ご参考になれば…
     の中を固定行、の中を可動行と規定しているケースもあります

    つい今しがた、貴サイトに出合ったばかりなのですが、とても実用性があると感じましたので、コメントさせていただきました。

  33. 4.ご参考になれば…
     THEADの中を固定行、TBODYの中を可動行と規定しているケースもあります。

    タグの箇所が正常に書き込まれていませんでした。

  34. ご意見ありがとうございました。
    現状の仕様と動作で個人的な欲求については満たしてしまっているのですが、今後リライトを行うような事があれば、検討したいと思います。

    列固定後の jQuery による操作、フォームが含まれる場合の挙動、凝ったデザインのテーブルにおける汎用性の向上あたりが、Ver.2 のアイディアとしてあります。

  35. 大変参考になりました。
    一つ質問があるのですが、ボタン操作で固定したテーブルを解除することは可能でしょうか?

  36. このプラグイン自体、スクロール化した table 要素を元に戻す動作をサポートしていないので、追加の実装無しには難しいかと思います。
    プラグイン適用後の DOM を見てもらえれば、元々の table 要素自体は手つかずで残っているのが分かるかと思うので、その table 要素だけ残しつつそれ以外のプラグインが導入した要素を削除すれば、近い動作が実現可能かと思います。

  37. 返信ありがとうございます。
    上記のコメントを参考に挑戦してみたいと思います。

  38. とても便利なプラグイン、ありがとうございます。

    使用した環境下で、ID指定のINPUTフィールドにて、ajaxでデータ更新を行う、が「テーブルをコピーして」いるので動かなくなりました(^^;

    baseTable.clone() で作られた crossTable rowTable colTable のみ、
    $([3table]).html($([3table]).html().replace(/[id]/ , /[id dummy]/);
    を実行して逃げております。

    idに css で指定してしまうと形が崩れてしまいますが、name で指定すれば回避できるので もし ver2 が出るのでしたら
    コメント扱いで良いのでサンプルとして組み込んで頂けると嬉しいです。

  39. IE8だけ、Tableにマージンが反映されないのでどうやら表示が崩れるっぽいです
    縦スクロールはテーブルの直下に要素を追加してやれば、マージンが反映されるます。
    ただ、右側のマージンをどうやって反映させればいいかが思いつかない…

  40. > JoJo さん

    ご意見ありがとうございます。
    多数の方にご利用いただき、色々なご意見をいただいた結果、色々と使いにくい部分がある事も分かって来ました。
    その中には、現状のアップデートでは根本的に対応が難しいようなものなども含まれます。
    いずれ Ver.2 を、という想いもありますので、その時には全てを解決したものを作りたいと思っています。

    > K さん
    IE8 だけ、というのが厳しいですね…。右マージンの代わりに、親エレメントでの右パディングで代用するとかで、回避出来ないでしょうか?

  41. 上の方でも既に質問された方がいらっしゃいましたが、私も自動リサイズを検討しております。

    >もともとのテーブルを4つにコピーした上で、
    >そのそれぞれを4つの窓から覗くような構成になっているため、
    >その窓の大きさを後から変えれば、見える範囲
    >(=見かけ上のテーブルの大きさ)を変えることは可能かと思います。
    >プラグイン実行後のHTMLなど参考にしながら、お試し下さい。

    情けない話ですが出力後のHTMLを確認したのですが皆目見当がつきませんでした。何かヒントでも結構ですのでご教授頂けませんでしょうか?

  42. プラグインのソースで言うと、58 行目からテーブルの分割を行っています。
    ここで、テーブルが 4 つにコピーされそれぞれさらにもう一つの div で囲まれるような形になります。
    ざっくり言うと下記のような感じです。

    この 4 つの div が各テーブルに対する「窓」となるように、68 行目以降の設定で、div と table の style を指定しています。
    div の大きさや table のマージンを調整する事で、見かけ上 1 つのテーブルがスクロールしているように見せかけているので、これらの style を変更する事で見た目のサイズを変更する事が可能です。

  43. 複雑なヘッダー構成を固定+カラム固定できるものはなかなかなく重宝しています。ありがとうございます。

    それでユーザーから任意の列の表示/非表示ができないか相談を受けました。「ColumnManager」(http://p.sohei.org/stuff/jquery/columnmanager/demo/demo.html)というものがあるのは知っており既に他の箇所で利用しているのですが、tablefixと併用するとヘッダーだけ消えて部はそのままになります。上記説明して下さっているように、画面の置換えが行なわれているのでColumnManagerとは相性が悪いのかと考えますが、なんとか併用できないものでしょうか。

    どうぞ、よろしくお願い致します。

  44. 技術的な話の所で触れているように、元々のテーブルをコピーして 4 つのテーブルを作り出し、それらを同期させてスクロールさせる事で、このプラグインは動作しています。

    ColumnManager というものの使い方は分からないのですが、単に適用しただけの場合は、コピーしたテーブルのうち 1 つにしか適用されていないので、そのような状況になるのでしょう。

    tablefix 適用後に、4 つに増えた全てのテーブルに対して ColumnManager を適用し、カラムの表示・非表示についても 4 つとも同期して動かすようにすれば、意図通りの動作となるように思います。

    実際には、プラグイン適用後の DOM の状況などを確認しながら、スクリプトを記述してみて下さい。

  45. 探していたものにたどり着き、使わせて頂こうと思っているのですが、設定の仕方がよく分からず、質問させて下さい。
    初歩的な質問で大変申し訳ございませんが、プラグインの呼び出し方のところにコードがありますが、これはどこに設定すれば宜しいのでしょうか。
    また、JavaScriptのコードはHTMLのヘッダーなどに設定すれば宜しいのでしょうか。
    教えて下さい。よろしくお願いいたします。

  46. プラグインの利用を検討していただいてありがとうございます。
    申し訳ありませんが、JavaScript 自体や jQuery プラグインの使い方など、jquery.tablefix.js 以前の内容に関する技術的な質問には、こちらでお答えすることは出来ません。
    初心者向け入門サイトなどを参照して頂くようお願いします。

  47. こちらをASP.NETのGridViewに対して使用してみました。

    ヘッダ部の固定はできたのですが、GridView内にテキストボックスを配置して、
    入力した値の登録・更新処理などをしようとすると、
    テキストボックス4つ分連結された値を取得してしまいます。

    例えばテキストボックスに”abc”と入力すると”abcabcabcabc”という値が取得されてしまいます。
    また、チェックボックスをクリックしても2、3度クリックしないとチェックが入らないという現象も起こります。

    テーブルを4つ使用しているというjQueryの処理上仕方ないのかもしれませんが、
    何か回避策は無いでしょうか?

  48. ASP.NET の GridView なるものが、どういうものなのかが分からないのですが、確かに仕組み上、フォームを含むテーブルの場合は、フォーム自体もコピーされて 4 つに増えるため、正しく動作しないかと思います。
    対策としては、プラグイン自体に手を入れるか、あるいはプラグイン適用後の HTML に対して、使わないフォームを disabled にするという対策が有効かも知れません。
    disabled にされたフォームについては、そもそも値がサーバに送られないので、サーバからしたらフォームが1つしか無いように見えます。

    ただ、テキストボックスの値が重複するという状況や、チェックボックスのクリックイベントでの挙動を聞く限り、ASP.NET のスクリプトも、何かしらクライアント側の処理を行っているようなので、そちらに対しても制御が必要になるかも知れません。
    この辺は、それぞれの状況に応じてデバッグを行ってみて下さい。

コメントを残す

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