問題タブ [fixed-header-tables]

私はhtml、jQuery、JSONを使用しており、テーブルヘッダーをフリーズする必要がある次のタスクに遭遇しました。ヘッダーをフリーズするために多くのプラグインを試しましたが、問題は、tbody が jQuery の ajax 呼び出しを介して json データで取り込まれているため、複製されたテーブル ヘッダーの幅と tbody の列の元の幅が整列していないことです..以下のコードを投稿してください。どこが間違っているのか教えてください。

HTML 部分:

使用される CSS スタイル:

jQuery スクリプト:

最初に2つの固定列がある水平テーブルをスクロールする必要があります。ここに私がこれまでに持っているものへのリンクがあります。私はかなり近いことを知っています.ラッパーがテーブルの本体をラップすることはできません.

http://jsfiddle.net/ajamali/TBnqw/1147/

私が見逃しているものはありますか？

この要点の固定ヘッダーをコードで使用しました。ヘッダー列をクリックして、クリックされた列ヘッダーに基づいてテーブルを並べ替えることができるようにしたいと思います。しかし、列のクリックイベントを取得できません。

jQueryを使用して実行時にテーブルを作成しています。テーブルは JSON データから取得されます。問題は、スクロールしたときにヘッダーが動かないように、テーブルに固定ヘッダーを提供する必要があることです。ヘッダーのみ用とテーブル コンテンツ用に 2 つの div を作成できることはわかっています。列のサイズも変更できる必要があるため、これはできません。同じことを行うために利用できる jQuery プラグインまたはコードはありますか?

を含むdivがあります。

ヘッダーのポパティが固定されたテーブル。2つのdivを書き込むことで実現しました。最初のdivにはヘッダーのみを定義するテーブルが含まれ、次のdivにはすべてのデータを含むテーブルが含まれます。

ヘッダーが固定されたテーブルは正常に機能しています。

しかし、ここに問題があります。ボタンクリックイベントによってテーブルを縮小および拡大する必要があります。次のコードが役立つかどうかを確認してください。これを達成する別の方法がある場合は、提案してください。

上記の表は、列がたくさんあるのでダミーですが、基本的に同じ方法で行いました。高さの幅だけが変更されます。

私のスクリプトは機能していません：

これで困った私を助けてください。

よろしくお願いします。

ヘッダーとサイドバーのインデックスを常に表示する必要がありますが、コンテンツを自由にスクロールできるようにします x & y ... この問題の解決策はありますか?

DataTables jQuery プラグイン (例: link ) を見てきましたが、代替手段があるかどうか疑問に思っていました。

ヘッダーが固定され、最初の列が固定された html テーブル (または似たようなもの) を作成する必要があります。

これまでに見たすべてのソリューションは Javascript を使用するかjQuery、scrollTop/scrollLeft を設定しますが、モバイル ブラウザーではスムーズに動作しないため、純粋な CSS ソリューションを探しています。

ここで固定列の解決策を見つけました: jsfiddle.net/C8Dtf/20/しかし、それを拡張してヘッダーも固定する方法がわかりません。

Webkit ブラウザーで動作させたり、いくつかの機能を使用したりしたいのですが、繰り返しますが、スクロールcss3には使用したくありません。Javascript

編集:これは私が達成したい動作の例です: https://web.archive.org/web/20130829032141/http://datatables.net/release-datatables/extras/FixedColumns/css_size.html

ASP Repeater でDataTables ( http://datatables.net/ )の FixedHeader 関数 ( http://datatables.net/extras/fixedcolumns/ ) を使用します。

ページが読み込まれると、リピーター/テーブルは表示されません。ユーザーは、データバインドされるリピーターのドロップダウンリストで項目を選択する必要があります。

スクリプトは、scriptmanager に ScriptReferences として追加されます。

テーブルを開始するためのコードは、次を使用してページ/ポストバックが完了したときに実行されます。

初期化: (テーブルが存在する場合のみ)

これは完全に正常に機能します。

ポストバックを取得するためだけに、更新パネル内に何もしない asp-button を追加しました。この後、次の行をスクロールしようとすると失敗します。

(固定ヘッダーを再作成するかどうかは関係ありません。(新しい FixedHeader...))

また、asp ポストバック fixedHeaderList.fnUpdate() の後に、FixedHeader オブジェクトで fnUpdate を実行しようとしました。

しかし、それはjavascriptエラーにつながるだけです:

アイデアはありますか？

この SO の質問のコードを使用して、固定テーブル ヘッダーを正常に作成しましたが、それを自分のページに適用する際にいくつか問題があり、それがわかりません。私はJavascript/jQueryに少し慣れていないので、少しご容赦ください。

このコードは、ブラウザーのスクロール イベントに依存して、 THEADがビューの外にあることを検出し、テーブルを複製して、複製したヘッダーをページの上部に配置するタイミングを認識します。
ただし、私のページには、検索バーなどを含むページの上部に固定されたDIVがあり、これが存在する場合、固定ヘッダーは機能しません。固定領域が必要なため、これを回避する方法を見つけるのに苦労しています。おそらく本当に単純ですが、私はそれを見ていません。

コード スニペットは次のとおりです。

これは、ページの簡素化されたバージョンを含む JSFiddle です。

http://jsfiddle.net/urvfE/

の CSS セクションを削除する#topsectionと#table-container、固定ヘッダーが動作していることがわかります。これらのセクションが存在する場合、何も機能しません。

余談ですが、もう1つ問題があります。テーブルで使用border-collapse:collapseして素敵な境界線を取得すると、Firefox は固定ヘッダーを適切にレンダリングしません。代わりに、完全に空のテーブルを上にレンダリングします。これを回避する方法はありますか？