Fixed header and scrollable body
<div class="Top1 base">
<table>
<tr>
<td>1
</td>
<td>2
</td>
<td>3
....
</tr>
</table>
</div>
<div class="Top2 base">
<table>
<tr>
<td>1
</td>
<td>2
</td>
<td>3
</td>
<td>4
</td>
<td>5
</td>
<td>6
</td>
<td>7
.....
</tr>
<tr>
<td>1
</td>
<td>2
</td>
<td>3
</td>
<td>4
</td>
.....
</tr>
<tr>
<td>1
</td>
<td>2
</td>
<td>3
</td>
<td>4
</td>
...
</tr>
<tr>
<td>1
</td>
<td>2
</td>
<td>3
</td>
<td>4
....
</tr>
<tr>
<td>1
</td>
<td>2
</td>
<td>3
</td>
<td>4
........
</tr>
<tr>
<td>1
</td>
<td>2
</td>
<td>3
</td>
<td>4
</td>
<td>5
...........
</tr>
<tr>
<td>1
</td>
<td>2
</td>
<td>3
</td>
<td>4
</td>
.....
</tr>
<tr>
<td>1
</td>
<td>2
</td>
<td>3
</td>
<td>4
</td>
<td>5
</td>
......
</tr>
</table>
</div>
.base{
width:250px;
overflow:scroll;
max-height:100px;
}
.Top1
{
overflow:hidden;
width: 230px;
}
$('.Top2').bind('scroll', function(){
$(".Top1").scrollLeft($(this).scrollLeft());
});
Source : http://jsfiddle.net/A79e2/10/