[解決済み] テーブルの上下に水平スクロールバーが表示される

質問

私は、非常に大きな table を作成しました。そこで、テーブルの下部に水平スクロールバーを設置することにしました。しかし、このスクロールバーをテーブルの上部にも表示させたいと思っています。

テンプレートにあるのは、こんな感じです。

<div style="overflow:auto; width:100%; height:130%">
<table id="data" style="width:100%">...</table>
</div>

これはHTMLとCSSだけで可能なのでしょうか？

どのように解決するのですか？

要素の上に2つ目の水平スクロールバーをシミュレートするには、"dummy" を配置します。 div 水平スクロールを行う要素の上に、スクロールバーがちょうど収まる高さで配置します。次に、ダミー要素と実際の要素に "scroll" イベントのハンドラをアタッチし、どちらかのスクロールバーが動いたときにもう一方の要素が同期されるようにします。ダミー要素は、実要素の上にある2番目の水平スクロールバーのように見えます。

実際の例 をご覧ください。 このフィドル

以下はそのコードです。 :

HTMLです。

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div>

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;
}

JSです。

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