HTMLとCSSを使用して表の上部と下部の両方に水平スクロールバーを追加できますか?

テーブルの上部と下部の両方に水平スクロールバーを追加する

大規模なテーブルを操作する場合、水平スクロールバーを組み込むことが不可欠になります。ただし、使いやすさを高めるために、このスクロールバーをテーブルの上部と下部の両方に表示することが望ましい場合があります。この記事では、HTML と CSS のみを使用してこの効果を実現する可能性を検討します。

提供されたコードは、ラッピング div を利用してスクロール可能なコンテナを作成します。このコンテナはテーブルを囲み、テーブルの水平方向のオーバーフローが確実に制御されます。ただし、このメソッドはスクロールバーをテーブルの下部に配置するだけです。

上部の 2 番目のスクロールバーをシミュレートするために、「ダミー」 div が導入されます。この div はテーブルの上に配置され、幅と高さをシミュレートすることでスクロールバーの外観を模倣します。

重要なことに、イベント ハンドラーはダミー div と実際のテーブルの両方にアタッチされます。これらのハンドラーは、2 つの要素間のスクロール アクションを同期します。その結果、実際のスクロールバーまたはダミーのスクロールバーのいずれかが操作されると、もう一方のスクロールバーもそれに追従し、デュアル スクロールバー システムのような錯覚を生み出します。

例として、この手法の機能実装は次の場所にあります。フィドルを提供しました。これは、スクロールバーの使用時に上部と下部の両方がどのように同期されるかを示しています。

この革新的なソリューションは、広大なテーブルの上部と下部の両方から簡単にスクロールできるようにすることで、シームレスなユーザー エクスペリエンスを提供し、アクセシビリティと操作性を向上させます。大規模なデータセットをナビゲートするのが便利です。

以上がHTMLとCSSを使用して表の上部と下部の両方に水平スクロールバーを追加できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。