2011-08-11 13 views
5

テストに関連するさまざまなテストデータの列をいくつか(無制限に)含む、テスト名の列を表示するテーブルがあります。いくつかのデータセットがあるので、私は見ることができる数を制限し、ユーザーが水平方向にスクロールして異なるデータセットを表示/非表示にしたいと思っています。HTML/jQueryテーブル:水平方向にスクロールし、最初の(左の)列を固定します。

Jquery table column sliding effectに受け入れられた答えは、私が探している滑り効果の種類を持っていますが、どのように名前の一番左の列を修正しますか?私はインターネット上の他の場所で提案されているように、私は2つのテーブルを複製したくないので、多くのデータがあります。

名前の固定テーブルとデータ結果のスクロールテーブルを1つ作成するだけで、行の高さは受信したデータの量(セル内に複数の行のテキストがある可能性があります)捨てられる

また、私はデフォルトのインターネットスクロールバーを必要としません。上記の例のように、スクロールを制御するために使用する左右の矢印の画像があります。

私は約4時間StackOverflowとその他のインターネットの答えを見てきましたが、まだ適切なものは見つかりませんでした。何か助けていただければ幸いです!

編集:左の列を絶対的に配置すると、残りの表が左の列の下で左にシフトします(データの最初の列が表示されなくなります)。最初の列と同じ内容の「ミラー」列を追加しても問題ありません。問題は、データ列に対応する名前のセルよりも背の高いセルがある場合、絶対配置された名前のセルはその事実を認識してサイズ変更することができないということです。思考?

答えて

1

テーブルで動作するものがわかりました。 1つの固定テーブルと1つのスクロールテーブルを作成する前に私が言ったことは、いくつかの変更を加えて動作します。

元のテーブルをテスト名とデータで保持してスクロールウィンドウに入れました。次に、左の列のみを持つ別のテーブルを作成し、それをスクロールテーブルの左の列のデフォルトの位置に絶対配置しました。次に、jQueryを使用して、データセルの変数の高さに合わせて単一の列セルのサイズを変更します(名前セルが大きい場合、データセルは重複列からこのデータを受け取ります)。

また、列の幅の配列を保持します。左または右のスクロール・ボタンをクリックすると、必要な配列値で表をスクロールし、配列索引を増減します。

例を書き直して書式化したくないのでコードを投稿しませんが、これを行う方法について質問がある場合はお気軽にお問い合わせください。 =)

+0

あなたのコードを投稿できますか? –

6

最初の列を固定し、他の列を下にスライドさせ、2番目の列を表示させました。http://jsfiddle.net/Skooljester/trFPD/1/今質問の他の部分について作業してみましょう。

+0

divで固定+スライドパネルを作成するのはかなり簡単です...問題はテーブルで作業するときです。マージンと間隔は、1つのテーブルにグループ化された行、列、およびセルとは異なる働きをします。 – craftsycandymonster