javascript - オーバーフローの非表示の div に浮かぶ

Question

テーブルの下部に到達すると停止する固定ヘッダーを持つテーブルを作成しました。でdivに入れましたoverflow: hidden;。私はすべてが機能するようになりましたが、100％私の好みではありませんでした。

<div class="container">
  <table class="tableWithFloatingHeader">
    <thead>
     <tr>
       <th>table1 col header</th>
       <th>table1 col header</th>
    </tr>
    <tr>
       <th>table1 col header2</th>
       <th>table1 col header2</th>
    </tr>
   </thead>
   <tbody>

       .............

   </tbody>
  </table>
</div>

問題は次のとおりです。

1. <thead>下にスクロールしてもすべてを取得できないようです。最初の行のみが行います (最初の<tr>)。

2. <th>下にスクロールすると、div に表示されているものだけが表示されます。

3. コントローラを div のすぐ横に配置するにはどうすればよいですか? より大きなモニターでは、その位置はかなりずれています（このため'left': '20px'）

ここに私のJSFIDDLEへのリンクがあります

そして、これが私のコントローラーのhtmlです

<div id="compare-table-controller"> 
                    <a href="javascript:void(0);" class="carousel-control left disabled " data-control="prev">&lsaquo;</a>
                    <a href="javascript:void(0);" class="carousel-control right " data-control="next">&rsaquo;</a>
</div>