Question

有一个表，其中预先不知道要显示的行数和列数。这是在JSP中生成的，如

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

，即列的宽度不固定

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

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

虽然这里有一个解决方案Scrollable table both horizontally and vertically with fixed header

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

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

Answer 1

您可以在position:absolute事件中使用window.onscroll并确定window.pageYOffset或document.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);
}

您可以使用一系列Element.offsetTop属性来确定offsetParentTop参数。这取决于你的头部有多深。

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

1 个答案: