Дергание div при прокрутке

Суть проблемы в следующем: есть div, в котором еще 2 div-a, в каждом из которых таблица. Первая таблица имитирует заголовок второй(чтобы при прокрутке вверх-вниз она была на месте, а при прокрутке влево вправо скролилась вместе со 2ой). Для имитации прокрутки верхнего дива использую prototype. Проблема в том, что в FF(для IE этот код не используется, в хроме и сафари все ок) при прокрутке мышкой(и ТОЛЬКО МЫШКОЙ) верхний див начинает дергаться. При прокрутке клавишами или щелчком мышкой на сам скроллбар все ок. Просьба заранее-не предлагать менять DOM структуру.
Нужно решить данную проблему именно с помощью либо CSS, либо js(или prototype). Заранее благодарю за помощь. Вот код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> 
<title>Pure CSS Scrollable Table with Fixed Header</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<meta http-equiv="language" content="en-us" /> 
<script src="prototype.js"></script>
<script type="text/javascript">
var scrollX=0;
function scroll() {
            if ($('t2').scrollLeft != scrollX) {
                scrollX = $('t2').scrollLeft;
                $('t1').scrollLeft = scrollX;
            }
}

</script>
<style type="text/css"> 
</style> 
</head>
<body> 
<div>
<div id="t1" stytle="overflow:hidden; width:100%">
<table>
<th>john</th>
...
<th>john</th>
</table>
</div>
<div id="t2" onscroll="scroll();" style="overflow:auto">
<table>
<tr>
<td>marie</td>
...
<td>marie</td>
</tr>
...
<tr>
<td>marie</td>
...
<td>marie</td>
</tr>
</table>
</div>
</div>
</body>
</html>

	От:	Vreditel
	Дата:	28.02.11 15:39
	Оценка: