table_html/css_WEB-ITnose の上下左右スクロールを実現するためにテーブル周りを修正しました。

質問:

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

最初にレンダリングを見ると、より明確になるかもしれません:

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

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

アイデア:

長く考えた結果、テーブルだけで実装するのは基本的に難しく、上下にスクロールすると競合が発生することがわかりました。最後に、私は考えを変え、div レイアウトとテーブルのようなデザインを使用して、この効果を実現しました。

解決策:

1. 全体のレイアウト: 上部、中間、下部、つまりヘッダー、本文、フッターに分かれています。ボディはしっかりしていて高いです。上下スクロールを実装します。とても単純なことではありませんか、笑。

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

3. 本文とフッターはヘッダーと同じです。

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

$("#Scroll").scroll(function () {                var scrollLeft = $(this).scrollLeft();                $(".column-container").css({ "left": -scrollLeft + "px" });            });

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

結論:

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