HTML と CSS のみを使用して、表の同期した上下の水平スクロールバーを作成する方法

HTML と CSS のみを使用して表の上部と下部の両方に水平スクロールバーを作成する方法

問題:

ユーザーは、大きなテーブルの上部と下部に水平スクロールバーを追加したいと考えていますJavaScript を使用せずに。

解決策:

CSS を使用して上に「ダミー」 div を作成することで、テーブルの上に 2 番目の水平スクロールバーをシミュレートすることができます。水平スクロール機能があり、スクロールバーにちょうど十分な高さのテーブル。 「scroll」イベントのイベント ハンドラーをダミー要素と実際のテーブルにアタッチして、どちらかのスクロールバーが移動されたときに両方の要素のスクロールを同期できます。

コードスニペット:

HTML:

<div>
<p><strong>CS S:</strong></p>
<pre class="brush:php;toolbar:false">.wrapper1, .wrapper2 {
  width: 300px;
  overflow-x: scroll;
  overflow-y:hidden;
}

.wrapper1 {height: 20px; }
.wrapper2 {height: 200px; }

.div1 {
  width:1000px;
  height: 20px;
}

.div2 {
  width:1000px;
  height: 200px;
  background-color: #88FF88;
  overflow: auto;
}

JavaScript:

$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});

ダミー div (.div1) は、実際のテーブル要素 (.div2) の上に 2 番目の水平スクロールバーとして表示されます。両方の要素のスクロールを同期することで、ユーザーは上部または下部のスクロールバーから表のコンテンツをスクロールできます。