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

上下の水平スクロールバー

質問:

は可能ですか? HTML と CSS のみを使用して、大きなテーブルの上部と下部の両方に水平スクロールバーを表示するには?

答え:

はい、上部に 2 番目の水平スクロールバーをシミュレートできます。

実装:

水平スクロール機能を持​​つテーブルの上に「ダミー」 div を作成します。この div は、スクロールバーにちょうど十分な高さである必要があります。

ダミー div と実際のテーブルの両方のスクロール イベントにイベント ハンドラーをアタッチします。これにより、どちらかのスクロールバーを移動すると、両方のスクロールバーのスクロールが同期されます。

コード サンプル:

HTML:

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content here -->
  </div>
</div></code>

CSS:

<code class="css">.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;
}</code>

JavaScript:

<code class="javascript">$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

ライブ例:

効果を説明するには、[実際の例](ここにフィドルリンク) を参照してください。

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