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;
}

0 Answers