Javascript 固定表和div中的页眉和页脚？

我有一个在可滚动div窗口中的表。页眉包含在一个thead标记中，页脚位于底部的一个单独的tbody中。我需要将它们固定在屏幕上，同时保持对齐/方向

我试过了

position:absolute

这就扭曲了一切

看下面的小提琴：

我愿意接受所有建议

---

编辑：还需要能够向左和向右滚动

老实说，最简单的处理方法就是使用一些已经构建的东西。摆弄桌子并不总是容易的，如果有人已经找到了一种简单易行的方法，为什么不使用它呢：）

---

我建议使用此选项：

确保页脚位于

中后，您可以使用以下选项修复页脚以及页面顶部和底部的页眉：

   position:fixed;

然后将收割台定位在：

   top:0;

页脚位于：

   bottom:0;

像这样：

thead, tfoot {position:fixed;background-color:#000; color:#fff;}
thead {top:0; }
tfoot {bottom:0;}

您仍然需要配置

单元格的宽度，但这将为您提供粘性页眉和页脚

---

这就是您要寻找的：

请查看此快速解决方案：

.header{
  width:100%;
  height:20px;
  background-color:blue;
}
.footer{
  width:100%;
  height:20px;
  background-color:green;
}
.content{

  overflow-y:auto;
}

---

FYI-页脚行应该放在一个元素中，而不是一秒钟。我现在正在处理它，但我发现在左/右滚动时很难继承父表的宽度。代码基于此stackoverflow问题，这只会将元素放在页面的顶部和底部，而这些元素会滚动到视图之外。OP希望表的页眉和页脚行始终处于视图中。您能提供一些左右滚动的帮助吗？还有保持从thead和tfoot继承的tbody宽度？如果你能在正确的方向推动，我将标记为顶部答案。你在使用引导吗？如果是这样的话，我的解决方案可能与其CSS类样式冲突。我确实在使用引导，但这不重要，对吗？唯一的问题是它不能保持tbody中单元格的对齐……好吧，您的表应用了引导类

class=“table-table-bordered-table-responsive”

。这让我觉得反应灵敏的部分是在和你战斗。