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

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

質問:

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

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

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

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

アイデア:

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

解決する:

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

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

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

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

JavaScriptコードコンテンツをクリップボードにコピー
  1. $( "#Scroll" ).scroll(関数() {
  2.                  var scrollLeft = $( this ).scrollLeft();
  3. $( ".column-container" ).css({ "left" : -scrollLeft + "px" });
  4. });

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

結論:

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

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

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

<<:  MySQL マスタースレーブスイッチチャネルの問題の解決策

>>:  Nginx は https ウェブサイト構成コード例を実装します

推薦する

MySQLにおけるACIDトランザクションの実装原理の詳細な説明

導入いつものように、シーンから始めましょう〜インタビュアー:「トランザクションの4つの特性をご存知で...

ウェブフロントエンド開発者が知っておくべき 9 つの実用的な CSS プロパティ

1. 角を丸くする今日の Web デザインは、常に最新の開発テクノロジーに追随しており、HTML5 ...

HTML テーブル マークアップ チュートリアル (39): ヘッダーの明るい境界線の色属性 BORDERCOLORLIGHT

テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...

Kubernetesでポッドを作成する方法

目次ポッドを作成するには? kubectl ツールポッドを作成するには?前回の記事では、コンテナとポ...

VMware Workstation16 と Navicat リモート接続での Centos7 での MySQL8.0 インストール プロセス

目次1. CentOS7+MySQL8.0、yumソースインストール2. MySQLにログインしてパ...

CentOS7 で yum を使用して PostgreSQL と PostGIS をインストールする方法

1. yumソースを更新するCentOS7 のデフォルトの yum リポジトリの PostgreSQ...

今日と昨日の 0:00 タイムスタンプを取得する MySQL の例

以下のように表示されます。昨日: UNIX_TIMESTAMP(CAST(SYSDATE() AS ...

MySQL サービス 1067 エラーの解決策: mysql 実行可能ファイルのパスを変更する

今日、MySQLサービス1067エラー問題に遭遇しました。システムアカウントを使用するように設定して...

太陽系の惑星のアニメーション効果を実現するHTML+CSS3コード

太陽系の 8 つの惑星(衛星を除く)のアニメーションを作成します。すべての惑星は太陽の周りを回ってい...

Vueデータ監視の原理の詳細な説明

<本文> <div id="ルート"> <h1&...

Vue + 要素を使用して背景データをオプションに動的に表示する

必要:ハードコードされたデータの代わりに、セレクター内のオプション値の動的な表示を実装します。私のロ...

Vue の匿名スロットと名前付きスロットの詳細な説明

目次1. 匿名スロット2. 名前付きスロット要約するスロット (slot) は、Vue のコンテンツ...

Vue でのルーティングガードの具体的な使用法

目次1. グローバルガード1.1 グローバルフロントガード1.2 グローバルポストルートガード1.3...

mysql5.7.19 winx64 インストールおよび構成方法のグラフィック チュートリアル (win10)

mysql 5.7.19 winx64のインストールチュートリアルは以下のように記録され、みんなと...

JavaScript のショートカットのヒント

目次1. 配列を結合する2. 配列をマージする(最初に) 3. 配列の複製4. 構造化分解割り当て5...