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>

Answer 1

演示

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