漂浮的 <thead> 在溢出的隐藏div中

Question

我制作了一个带有固定表头的表，该表头在到达表的底部时停止。 我把它放到一个有overflow: hidden;的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>

Answer 1

演示版

更改width: 700px到width: 100%您可以更改宽度值（百分比值）等left值