Question

我使用div创建了一个自定义表格（由于过于复杂的行为，这只是解决方案）。但我的页眉和页脚有问题。

表html基本上很简单：

<div class="table">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

我需要的是以下内容：当桌面内的内容不是太大而无法在没有滚动条的情况下查看时，标题将位于顶部，页脚位于内容的下方（因此不会粘贴到容器的底部））。
但是当表的内容扩展时（无论是使用新数据加载页面还是使用javascript / jQuery扩展某些表内容），我都需要将标题粘贴在容器和页脚的顶部粘贴在容器的底部，而内容可以滚动而不重叠页眉/页脚。

我在这方面进行了大量搜索，但是没有找到合适的解决方案，有没有办法使用css和/或javascript / {{1}来解决这个问题（尽可能简单） }？

修改的这是我的意思的基本样本：jsFiddle

如果单击示例中的jquery，页眉和页脚应固定在容器的顶部和底部。但是我如何检测尺寸的增加？

Answer 1

.offset() + .scrollTop() = DISCO

基本上（jsfiddle demo）：

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()对页脚做同样的事情。

Answer 2

这完全违反了语言的语义，因此可能完全破坏所有可访问性。改为使用HTML表格。

<table id="mahTable" summary="some descriptive summary">
    <caption>This descriptive data visually appears outside your table.</caption>
    <thead>
        <tr><th>Header Cell</th><th>Other header cell</th></tr>
    </thead>
    <tbody>
        <tr><td>data 1</td><td>data 2</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="2">footer here</td></tr>
    </tfoot>
</table>

要说这在您当前的代码/编程中是不可能的，这意味着您完全需要重新考虑您的方法。首先获取HTML正确，然后再找出演示文稿。如果您在满足内容的需求或结构之前忙于演示，那么您的演示文稿可能会失败。

当内容太大时需要粘性页眉和页脚

2 个答案: