HTML-таблица с вертикальной и горизонтальной прокруткой

Question

Существует таблица, в которой число строк и столбцов, которые будет отображаться не известно в advance.That генерируется в 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 решение или последовательность steps.Thanks

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. Это действительно зависит от того, насколько глубоко у вас есть заголовок.