テーブルの4辺を上下左右にスクロールするように固定する方法

質問：

最近、プロジェクトの統計を行っていたときに、テーブルを上下にスクロールしたときにテーブルの先頭と末尾が固定され、テーブルを左右にスクロールしたときにテーブルの最初と最後の列が固定されるという特定の要件に遭遇しました。

まず効果図を示すとより明確になるかもしれません:

左右にスクロールすると、2 つの列は固定され、先頭と末尾の中央部分が一緒にスクロールします。

上下にスクロールすると、先頭と末尾は固定され、最初と最後の列の中央部分が一緒にスクロールします。

アイデア:

いろいろ考えた結果、テーブルだけだと基本的に実現が難しいことと、上下にスクロールしたときに矛盾が生じることが分かりました。最終的に、私は考えを変えて、div レイアウトとテーブルのようなデザインを使用してこの効果を実現しました。

解決する：

1. 全体的なレイアウト:上部、中間、下部、つまりヘッダー、本文、フッターの 3 つの部分に分かれています。ボディは高めです。上下スクロールを実装します。簡単じゃないですか？ハハハ。

2. ヘッダーレイアウト:左コンテナー右、左 10% 幅左フローティング、コンテナー 80% 幅左フローティング、右 10% 幅左フローティングに分割されます。コンテナ内のデータの実際の幅を持つ列コンテナ (相対配置) を追加します。

3. 本文、フッター、ヘッダー。

4. 制御コア: コンテナと同じ幅 (80%) の div を生成し、その中に列コンテナの実際のデータ (id=Scroll など) と同じ幅の div を配置します。左右のスクロールバーをシミュレートします。

つまり、シミュレートされたスクロール バーは、ヘッダー ボディ フッター内の列コンテナーのスクロールを制御します。こうすることで、左右にスクロールするときに 2 つの列が固定され、最初と最後の行のコンテナーもスクロールします。

結論：

コード スタイルは投稿するには長すぎるため、ここではアイデアについて説明し、試してみることにします。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

オリジナル URL: http://www.cnblogs.com/checccy/p/5601145.html