Javascript 具有垂直和水平滚动的HTML表格

有一个表，其中要显示的行数和列数事先不知道

  <thead>
   <tr>
     <c:foreach col=${Dcol} >
      ...
     </c:foreach>
   </tr>
   </thead>

...

i、 列的宽度不是固定的

水平滚动时，标题行应水平滚动

垂直滚动时，标题行应保持固定

虽然这里有一个解决方案

我想知道我是否可以使用两个单独的表（表1用于标题行，表2用于所有其他行），并通过在第二个表上绑定水平滚动事件来调用水平滚动第一个表的函数来同步它们的水平滚动。 这可以通过简单的javascript实现吗，因为表只有一个onscroll事件，而没有特定滚动方向的事件

---

请提供任何简单的javascript解决方案或步骤序列。谢谢您可以在

窗口上使用
位置：绝对
。onscroll

事件并确定

窗口.pageYOffset

或

文档.body.scrollTop

，如：

//first the CSS
#headerContainer{
  padding:0; position:relative; overflow:visible;
}
#header{
  margin:0; padding:0; position:absolute; top:0; left:0; z-index:99;
}
//now the JavaScript
var win = window, doc = document, bod = doc.getElementsByTagName('body')[0];
function E(e){
  return doc.getElementById(e);
}
var pT = 0;
function nice(elementId, offsetParentTop){
  var hs = E(elementId).style;
  var sy = win.pageYOffset || bod.scrollTop;
  if(sy !== pT){
    pT = sy+offsetParentTop;
    hs.top = pT+'px';
  }
}
onscroll = function(){
  nice('header', 30);
}

---

您可以使用一系列

元素.offsetTop

属性来确定

offsetParentTop

参数。这实际上取决于你的标题有多深。

你能再解释一下如何在HTML中实现这一点吗？在我看来，表格标题在页面滚动时会保持不变。表格标题应该在表格的垂直滚动条滚动时保持不变。您可以在HTML页面底部的

标记前面放置一个

。我不打算为你做CSS，但我创建了一个工作小提琴。您可能需要考虑浮动布局而不是表。查找它。感谢您的方法，但是如果我能够正确地实现它，那么随着列数的增加，列分隔符的对齐方式会增加，并且页眉相对于页面的垂直滚动是固定的。我在这里发现了一个jquery实现，其中不同的列可以具有不同的宽度