冻结标题直到不相关(HTML、CSS和JS)

Question

我有几个不同的表格，我想在页面上垂直显示。问题是，不同的表有不同的列标题。

在图片中，黑色边框表示视口。虚线红色边框是红色标题所属的位置，但请注意，它被“冻结”到视口的顶部。这是正确的，直到在第二张图像中，绿色标题开始替换它。http://imagebin.org/172108

​

有人知道如何使用非常轻量级的脚本(换句话说，我不想要JQuery之类的东西)和CSS来实现这一点吗？我有一个优势，那就是我只需要在Webkit上渲染它(这意味着也可以选择一些css3 )。我并不关心标题是否实际上不是html <table>的一部分--它们显然必须正确排列。

Answer 1

编辑：http://jsfiddle.net/BCtP8/3/

在这里，我修复了打呃的文本。当头部变得固定时，我会改变唱片工的高度。我还将其更改为适用于任何标题高度，而不仅仅是我给他们的标题高度。

老帖子在这里你走吧，伙计：

http://jsfiddle.net/BCtP8/

对于可能发生的任何问题，我很抱歉，我对整个web开发场景都是新手，我没有经验来预测可能发生的事情。

我怀疑这是最好或最有效的方法，所以如果你发现更好的，请在这里张贴，这样我就可以学习了。谢谢。

Answer 2

这只有Javascript才有可能--我想不出简单地用CSS就能做到这一点。

答案的基础是在元素上使用position:fixed。我建议克隆表的thead，将其附加到表顶部的固定位置，然后为scroll事件添加一个事件侦听器，并根据滚动的数量检查每个表的位置。

我已经发布了一个example on JSFiddle。

Answer 3

值得一提的是：

这里有几个答案，但我不认为他们实际上回答了这个问题。它们不在表头(thead元素)上操作，也不使用第三方库。从表中取出thead有一些微妙的问题-其中最大的问题是，如果标题文本比tbody中的数据更宽或更窄，单元格将向下折叠。

这是我的解决方案，它解决了这个问题，不需要任何库，也不需要处理表头。它对表的样式或头的大小没有任何假设；所有内容都是经过计算的。仅在Chrome中测试，符合OP的要求。

脚本：

function initFloatingHeaders() {
  var tables = document.querySelectorAll('table.float-header');
  var i = tables.length;

  while (i--) {
    var table = tables[i];
    var wrapper = document.createElement('div');
    wrapper.className = 'floating-header';
    var clone = table.cloneNode(true);
    wrapper.appendChild(clone);
    table.parentNode.insertBefore(wrapper, table);

    var thead = table.querySelector('thead');
    wrapper.style.width = thead.scrollWidth + 'px';  
    wrapper.style.height = thead.scrollHeight + 'px';
    wrapper.style.left = table.offsetLeft + 'px';     
  }

  window.addEventListener('scroll', function() {
    var headers = document.querySelectorAll('div.floating-header');
    var bodyHeight = document.body.offsetHeight;
    var i = headers.length;
    while (i--) {
      var header = headers[i];
      var tableBounds = header.nextSibling.getBoundingClientRect();
      if (tableBounds.top < 0 && tableBounds.bottom > 0) {
        header.style.display = 'block';
      } else {
        header.style.display = null;
      }
    }
  }, false);
}

表应该应用类float-header，并且应该在load或documentReady上调用initFloatingHeaders。示例：http://jsbin.com/ulusit/2 (转换不佳的旧示例：http://jsbin.com/ulusit/)