Как сделать фиксированный заголовок в таблице с помощью div?

Question

HTML:

<thead> 
<tr> 
    <th><div style="width:36px"><textarea class="cell"></textarea></div></th> 
    <th><div style="width:36px"><textarea class="cell"></textarea></div></th> 
</tr> 
<div class="header"> 
    <tr> 
     <th><div style="width:36px"><textarea class="cell">Name 1</textarea></div></th> 
     <th><div style="width:36px"><textarea class="cell">Name 2</textarea></div></th> 
    </tr> 
</div> 
</thead> 

CSS:

div.header { 
    position: absolute; 
} 

JS:

$(window).scroll(function() { 
    $('div.header').css({ 
     'top': $(this).scrollTop() 
    }); 
}); 

Я хочу, чтобы оставить на месте первой поддельной строки заголовка, чтобы применить ширину столбцов таблицы и переместить другие строки при прокрутке, но они не перемещаются. Что мне нужно изменить?

Answer 1

Вместо использования div вы можете дать вам тень фиксированной высоты и переполнения: авто. Это позволит телу таблицы для прокрутки

Answer 2

DEMO

Это решение возможно?

<thead> 
<tr> 
    <th><div style="width:36px"><textarea class="cell"></textarea></div></th> 
    <th><div style="width:36px"><textarea class="cell"></textarea></div></th> 
</tr> 
<div class="header"> 
    <tr> 
     <th><div class="horizontal"><textarea class="cell">Name 1</textarea></div></th> 
     <th><div class="horizontal"><textarea class="cell">Name 2</textarea></div></th> 
    </tr> 
</div> 
</thead> 

CSS

.horizontal { 
display:inline-block; 
margin-right:20px; 
width:150px; 
} 
.header{ 
height:35px; 
width:165px; 
overflow-x:scroll; 
overflow-y:scroll; 
}