OTCHY.NET

jquery.tablefix.js

ツイート

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

<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>

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

48件のコメント »

• 匿名 より:

  2010-04-22 17:00

  選択した行の背景色を設定できません。
• Tweets that mention jquery.tablefix.js – OTCHY.NET -- Topsy.com より:

  2010-04-23 01:33

  [...] This post was mentioned on Twitter by Yuya. Yuya said: 【tablefix.js】テーブルヘッダや左側固定でExcelみたいに<table>〜</table>を表示するプラグイン。めちゃくちゃ簡単に綺麗なスクロールテー [...]
• Otchy より:

  2010-04-26 14:05

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

  2010-07-06 13:29

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

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

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

  2010-07-06 14:06

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

  2010-07-06 23:46

  報告ありがとうございました。
  内容を確認してみます。
• DONG より:

  2010-08-10 18:11

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

  2010-08-11 02:56

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

  2010-08-13 09:21

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

  2010-10-14 20:29

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

  2010-10-19 23:51

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

  2010-11-19 23:15

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

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

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

  2010-11-22 10:33

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

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

  2010-11-24 13:25

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

  2010-11-24 14:18

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

  2011-01-12 18:32

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

  2011-01-13 11:40

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

  2011-02-23 16:25

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

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

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

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

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

  2011-02-24 15:04

  左固定部分の幅を固定したいのですが、可能なのでしょうか？
• nassy より:

  2011-02-24 16:24

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

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

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

  2011-02-25 20:49

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

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

  2011-03-03 22:42

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

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

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

  2011-04-04 21:20

  ie6では、動かないのでしょうか。構文エラーとなってしまいました。
• Otchy より:

  2011-04-12 12:49

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

  2011-04-21 10:43

  ＞ももあんさん

  テーブルのスタイルシートに
  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;
  }
• NOMU より:

  2011-06-02 12:03

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

  2011-06-07 05:26

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

  2011-06-21 02:55

  テーブルのソーティング機能は対応可能なのでしょうか？
• Otchy より:

  2011-06-21 11:54

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

  2011-07-04 01:32

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

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

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

  宜しくお願い致します。
• Otchy より:

  2011-07-06 11:06

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

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

  2011-07-13 18:03

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

  2011-07-15 12:59

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

  2011-08-08 17:22

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

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

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

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

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

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

  2011-08-08 17:26

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

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

  2011-08-11 14:23

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

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

  2011-09-22 20:05

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

  2011-09-26 15:03

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

  2011-09-26 18:45

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

  2011-11-07 14:16

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

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

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

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

  2011-11-07 19:21

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

  2011-11-08 12:47

  > JoJo さん

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

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

  2011-11-25 21:29

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

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

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

  2011-11-28 18:02

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

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

  2011-12-27 17:13

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

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

  どうぞ、よろしくお願い致します。
• Otchy より:

  2011-12-27 17:19

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

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

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

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

  2012-01-16 17:16

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

  2012-01-17 00:47

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

RSS feed for comments on this post. TrackBack URL