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

Question

There is a table in which the number of rows and columns to be displayed is not known in advance.That is generated in a JSP like

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

ie width of the columns isn't fixed

When scrolling horizontally the header row should scroll horizontally.

When scrolling vertically the header row should remain fixed.

Although there is a solution here Scrollable table both horizontally and vertically with fixed header

I would like to know if i can use two separate tables (Table1 for header row and Table2 for all other rows) and synchronize their horizontal scrolling by binding a horizontal scroll event on second table to call a function which scrolls first table horizontally. Can this be done through simple javascript as a table has only an onscroll event and no event for specific direction of scroll?

Please provide any plain javascript solution or sequence of steps.Thanks

Answer 1

You could use position:absolute on a window.onscroll event and determine for window.pageYOffset or document.body.scrollTop , like:

//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);
}

You could use a series of Element.offsetTop attributes to determine your offsetParentTop argument. It really depends how deep you have your header.