Как зафиксировать ячейки th при прокрутке таблицы по вертикали
 

Есть таблица в которой на определена высота и есть скрытые строки, открываемые по клику. Мне нужно зафиксировать при прокрутке первые столбцы, пока есть возможность использовать тэг th. Моя версия создать спозиционированный абсолютно div и добавить туда новую табличку созданную из первых столбцов исходной таблицы, но запутался в коде. разгребаю пока. Может ли кто предложить решение лучше, может код посмотреть и поправить. Или хорошую библиотеку посоветовать. Пробовал через "fixedheadertable" но тут проблемы с триггерами на кнопки возникли. Строчки нужно сворачивать.

В общем и в целом всё вроде :help:

Сразу исправлюсь в теме ошибка бегунок по ГОРИЗОНТАЛИ! По вертикали оставляем браузеру.

(function () {
var $table = document.createElement('table');
$table.id = 'stageTableDiv'
$table.style.backgroundColor = 'white';
$table.style.borderCollapse = 'collapse';
$table.style.border = '1px';
$table.border = $('#stageTable')[0].border;
$($table).append(document.createElement('thead'));
for (var i = 0; i < $('#stageTable thead tr th').length ; i++) {
$($table).find('thead').append(document.createElem ent('tr'));
$($table).find('thead tr')[i].innerHTML = $('#stageTable thead tr th')[i].outerHTML;
}
$($table).append(document.createElement('tbody'));
for (var i = 0; i < $('#stageTable tbody tr').length ; i++) {
$($table).find('tbody').append(document.createElem ent('tr'));
for (var j = 0; j < $('#stageTable tbody tr th').length ; j++) {
var $el = document.createElement('th');
$el.innerHTML = $('#stageTable tbody tr th')[j].outerHTML;
$($table).find('tbody tr')[i].innerHTML = $elappend($el[0]);
}
}

$($table)[0].innerHTML = $('#stageTable')[0].innerHTML;
$($table).offset($('#stageTable').offset());
$table.style.position = 'absolute';
$table.style.zIndex = 1000;
$('div.fixedheadertable').append($table);

$("button:last").click(function () {
$("button:first").trigger('click');
});

//$('#stageTable th')[0].style.position = 'fixed';
})(jQuery)

Спасибо за помощь коллеги:
Уже разобрался:

//----------------------------------------------------------------------------------------------------
//Клонируем всю табличку удаляем всё кроме th
//----------------------------------------------------------------------------------------------------
var $t = $('#stageTable').clone();
$t.find('td').remove();
$t.appendTo('div.clone').css('position', 'absolute').css('z-index', '1000');
$t.attr('id', 'stageTableFix');
//----------------------------------------------------------------------------------------------------
//Равняем таблички по высоте
//----------------------------------------------------------------------------------------------------
$t.height($('#stageTable').height());
//----------------------------------------------------------------------------------------------------
//Равняем по точке рисования таблицы
//----------------------------------------------------------------------------------------------------
$t.offset($('#stageTable').offset());