javascript - 固定表和 div 中的页眉和页脚？

Question

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

我试过了

position:absolute

这会扭曲一切。

请参阅以下 fiddle : http://jsfiddle.net/jkgt3wdm/

我愿意接受所有建议。

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

Answer 1

在确保您的页脚位于 <tfoot> 之后，您可以修复它以及页面顶部和底部的页眉:

   position:fixed;

然后将页眉定位在:

   top:0;

和页脚:

   bottom:0;

像这样:

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

您仍然需要配置 <tbody> 的宽度单元格，但这应该会给你粘性页眉和页脚。

这是您要找的吗:http://jsfiddle.net/jkgt3wdm/6/