Reputation: 4149
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()
});
});
I want to leave in place first fake header row to apply column widths to the table and move other rows when scrolling, but they don't move. What I need to change?
Upvotes: 0
Views: 1315
Reputation: 1413
Is that solution possible?
<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;
}
Upvotes: 0
Reputation: 96
Instead of using the div you can give you tbody a fixed height and overflow:auto. This will allow the body of the table to scroll
Upvotes: 2