一页上有多个Bootstrap表。在这种情况下，我们如何才能实现“固定头”解决方案？

Question

我正在使用bootstrap framework v3并在一个页面上创建了4个表。二合一容器。

e.g。 第一个容器：

<div class="container">
<div class="row">
<div class="col-md-6"> <table> <thead></thead> <tbody></tbody> </table> </div> // first table
<div class="col-md-6"> <table> <thead></thead> <tbody></tbody> </table> </div> // second table
</div>
</div>

第二个容器：

<div class="container">
<div class="row">
<div class="col-md-6"> <table> <thead></thead> <tbody></tbody> </table> </div> // third table
<div class="col-md-6"> <table> <thead></thead> <tbody></tbody> </table> </div> // fourth table
</div>
</div>

我在互联网上搜索并尝试了很多代码，但是单个页面上所有四个表格的标题都没有正确修复。

我想要修复所有四个标题和标题，同时表格的主体可以垂直和水平滚动给定的高度和宽度。

工作演示：转到Plunker并在单独的窗口中启动预览。