В одном проекте уже очень давно используется такой велосипед:
<div id="wrapper" class="xScroll">
<div class="fixedHeader">
<table>
<thead>
<tr>
<td></td>
...
<td></td>
</tr>
</thead>
</table>
</div>
<div class="yScroll">
<table>
<tbody>
<tr>
<td></td>
...
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
.xScroll {
overflow-x: hidden;
width: 725px;
}
.yScroll {
height: 300px;
overflow: scroll;
width: 100%;
}
.fixedHeader {
overflow: hidden;
}
$('.yScroll').scroll(function () {
$('.fixedHeader').scrollLeft($(this).scrollLeft());
});
Есть и более элегантные решения, вынуждены были использовать такое т.к. делалось под IE6…
Есть еще несколько нюансов в случаях когда ширина шапки не будет совпадать с шириной таблицы из-за появившегося скрола, но думаю вы с ними справитесь, тем более если у вас ширина выравнивается при помощи js.