2016-03-23 4 views
-1

スティッキーヘッダと固定カラムスクロール動的テーブル垂直・水平:Iは、ユーザにデータとの要件は以下の通りであるような表を提示するソリューション開発してい

水平スクロールの固定寸法内に。水平方向にスクロールするとき、最初の列はスティッキーでなければならず、スクロールするときにユーザーに従う必要があります。

スティッキーヘッダーを使用した垂直スクロールでは、ユーザーが上下にスクロールするたびにヘッダーが表示されます。

ここでは1つの解決策が見つかりました:私はしかし、私のサイトで実装した後、ウィンドウの寸法に基づいてテーブルの幅を変更したいです。これは理想的ではありません。

最終的な回答なしで、これについて複数の質問を投稿しました。

誰かがプラグインを知っているのか、それとも似たようなことをして正しい方向に向いているのかを主に尋ねます。

答えて

1

Try SlickGrid:

SlickGridは、高度なJavaScriptのグリッドです。 いくつかのハイライト:

  • 適応仮想スクロール

  • 列のリサイズ/リオーダー/ショー(極端な応答性を持つ行の数十万人を扱う)/

+0

素晴らしい!幸運:) –

1

がそれぞれの正確な幅を適用する隠しますカラム。スティッキーヘッダーとテーブルの内容が別のテーブルにあることを願っています。したがって、ヘッダーの幅と表の内容を別々に指定する必要があります。たとえば、スティッキーヘッダーの最初の<td>と表形式データの最初の<td>は同じ幅を持つ必要があります。すべての列にこのような幅を適用します。

+0

テーブルの幅は100%にする必要があります。これは、表示される列がさらに多い場合、クライアントがユーザーが水平にスクロールできるようにするためです。あなたの提案によると、私は3つの個々のテーブル要素を開発するために解釈しています。固定ヘッダーの1つのテーブル、固定列の1つのテーブル、テーブル本体の1つのテーブル - それは正しいですか?私はこのアプローチで、スクロールはCSSだけを使って完全に達成できると思いますか? – Filth

+0

stickyカラムの一例 - http://jsfiddle.net/zinoui/BmLpV/ – Filth

+0

また、正確な機能のもう1つの例 - これをリッピングし、必要に応じて変更してください http:// codepen。 io/ajkochanowicz/pen/KHdih – Filth

関連する問題