HTMLテーブルに "フリーズペイン"機能をどのように複製しますか？

Question

私は私の仕事のために開発しているASP.NETプロジェクトにウィジェットを持っています。 300ピクセル幅でなければならず、それ以上の幅を持つことはできません。残念ながら、彼らが望むものは、そのような小さなウィジェットにとってかなり複雑であることが証明されています。ここで私が今持っているものです。

http://www.codetunnel.com/content/images/widget/currentWidget.jpg

あなたが見ることができるように、これはjQueryのUIのアコーディオンコントロールです。各アコーディオン・ペインが展開されると、その内容を非同期にロードするためのajax呼び出しが行われます。今は、目的のデータを含むHTMLテーブルを吐き出します。テーブルはDIVの中でスタイルoverflow: auto;で囲まれているので、下部と右にスクロールバーが表示されます。

私の問題は、（フリーズペインのExcel機能のような）カスタム機能がほしいということです。左右にスクロールするときは、ヘッダーを含むすべての行を左右にスクロールさせたい場合はを、末尾の列にはを "product name"とします。

http://www.codetunnel.com/content/images/widget/scrollRight.jpg

スクロールアップとダウン私は左の列を含むすべての列を、したい、上にスクロールするとダウンヘッダー行のための除いた場合：このように。このように：

http://www.codetunnel.com/content/images/widget/scrollDown.jpg

この機能を実現するための最良の方法は何ですか？または方法がありますか？

Answer 1

私は幾分似通っていますが、はるかに複雑ではありません。データ行が垂直方向にスクロールしている間、テーブルの最初の行（ヘッダー）をフリーズしたかったのです。私は2つの異なるテーブルとして実装しました。各テーブルは固定幅のセルを持ち、それぞれが独自のDIVになっています。 "ヘッダー" divは単純に静的になり、 "body" divはオーバーフローを使用しました：自動スクロールします。

両方の軸で「ペインをフリーズ」し、両方の軸でスクロールできるようにするために、問題がより複雑になります（私にはもっと多くの不動産があり、水平スクロールを考慮する必要はありませんでしたまったく）。

• NW：この1つは、これまで、全くスクロールしないにもかかわらず、あなたはそこからその位置や作業から始めることができるのだろうか...

  は4つのdivを定義します。あなたの例の「製品名」セルです

• NE：これは水平方向にのみスクロールします。あなたの例の先頭/見出し行です
• SW：これは垂直方向にのみスクロールします。あなたの例では左側の列です
• SE：これは両方向にスクロールします。あなたの例のプライマリデータグリッド

4つのDIVを使用すると、4つの異なる表を扱うことになるので、セルの幅とセルの高さを同期させておく必要があります。理想的にはレンダリング時にこれを固定値にすることができます。それ以外の場合は、ページが最初にロード（またはサイズ変更）されたときにSEテーブルのセルを反復処理し、他のテーブルのサイズを強制的に一致させるように、クライアントサイドのjquery/JSを記述することができます。

4つのDIVで、スクロールを同期させる必要があります。SEが水平方向にスクロールするとき、NEは同じ位置にスクロールする必要があります。 SEが垂直にスクロールするとき、SWは同じ位置にスクロールする必要があります。 SEがスクロールされたときを検出するために、私たちがフックできるクライアント側のスクロールイベントがいくつかあるはずです。これらのイベントの中で、NEとSWを同じようにスクロールさせる必要があります。

申し訳ありませんが、このような漠然とした/抽象的な応答です。このようなものを実装することの大胆さは、私が主な仕事から楽に盗むよりも時間がかかります。しかし、これは私の脳の中で揺れ動いているものなので、私はそれをあなたと共有しています。私はそれが少なくともあなたに少しでも近いソリューションを提供してくれることを願っています。乾杯！

Answer 2

固定サイズのテーブルの中でtbodyが解決できるのでしょうか？あなたはtbodyにoverflow:autoを入れることができると思われます。