I want to move vertical scroll bar to DIV "wrapper". below code have vertical scroll at end of the table body. I need to display it in wrapper DIV also, I made header as fixed.
Is this possible?
<div class="wrapper">
<table width="100%" class="scrollTable">
<thead class="fixedHeader">
<tr>
<th><a href="#">Header 1</a></th>
<th><a href="#">Header 2</a></th>
<th><a href="#">Header 3</a></th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
</tbody>
</table>
CSS CODE
table {
width: 360px;
overflow-x: scroll;
}
tbody {
width: 100%;
height: 300px;
overflow-y: auto;
display: block;
}
table.scrollTable tbody,
table.scrollTable thead { display: block; }
.wrapper {
overflow-x: auto;
width: 200px;
border: 1px solid #000;
}