当内容太大时需要粘性页眉和页脚
我使用div创建了一个自定义表（由于过于复杂的行为，这只是解决方案）。 但我的页眉和页脚有问题。
表格html基本上很简单：
我需要的是以下内容：当表内的内容不是太大而无法在没有滚动条的情况下查看时，标题将位于顶部，页脚位于内容的下方（因此不会粘到容器的底部）。
但是当表的内容扩展时（无论是使用新数据加载页面还是使用javascript / jQuery扩展一些表内容），我需要将标题粘贴在容器的顶部，并且页脚粘贴在容器的底部，同时内容可以滚动而不重叠页眉/页脚。
我在这里搜索了很多，但还没有找到一个像样的解决方案，有没有办法解决这个问题（尽可能简单）使用css和/或javascript / jquery ？
编辑这里我的意思的基本样本： jsFiddle
如果单击示例中的span ，则页眉和页脚应固定在容器的顶部和底部。 但是如何检测尺寸的增加？
.offset() + .scrollTop() = DISCO
基本上（ jsfiddle演示 ）：
function placeHeader(){ var $table = $('#table'); var $header = $('#header'); if ($table.offset().top <= $(window).scrollTop()) { $header.offset({top: $(window).scrollTop()}); } else { $header.offset({top: $table.offset().top}); } } $(window).scroll(placeHeader);
换句话说，如果表的顶部位于scrollTop之上，则将标题置于scrollTop，否则将其放回表的顶部。 根据网站其余部分的内容，您可能还需要检查是否已经滚动到表格之外，从那时起您不希望标题保持可见。
并且不要忘记$(window).height()对页脚做同样的事情。
这完全违反了语言的语义，因此可能完全破坏所有可访问性。 请改用HTML表格。
This descriptive data visually appears outside your table. Header Cell Other header cell data 1 data 2 footer here
要说这在您当前的代码/编程中是不可能的，这意味着您完全需要重新考虑您的方法。 首先获取HTML正确，然后再找出演示文稿。 如果您在满足内容的需求或结构之前忙于讨论演示文稿，那么您的演示文稿可能会失败。