Навигация по таблице

[GoodS]

Проблема в следующем:
Есть таблица примерно 50х30. Все столбцы и строки проименованы.
Из-за большого размера таблицы, когда просматриваешь правый-нижний край таблицы не видно заголовков строк и столбцов.
А нельзя ли сделать всё это дело в виде 3х фреймов.
1ый фрейм - названия столбцов, 2ой - название строк, 3ий - собственно таблица.
Причем, при прокрутке первых двух фреймов, должен прокручиваться и 3ий.
Такое вообще реально сделать?

[InsaneX]

_http://www.activewidgets.com/grid/ ili ishem v google po keyword'am "ajax table sortable table ajax grid"

[GoodS]

Спасибо, я просто сам хочу такую табличку сделать.

[Saruman]

GoodS
Фреймы, имхо, в данном случае зло. Можешь посмотреть реализацию таблицы с вертикальной прокруткой и фиксированным заголовком здесь - Pure CSS Scrollable Table with Fixed Header. Не пробовал фиксировать еще и первую колонку, так что не уверен, что это реально - но можешь, отталкиваясь от приведенного кода, его уже попытаться доработать.

InsaneX
А Ajax-то тут при чем? Статика ж одна

[GoodS]

Вот что получилось в итоге:

<style>td {font-family: verdana; font-size: 12px; border-width: 1px; border-style: solid; border-color: 5981A4;}
.tblcols {table-layout: fixed; border-collapse: collapse;}
.tblcols td {background-color: 5981A4; color: FFFFFF; width: 100px; }
.tblrows {border-collapse: collapse;}
.tblrows td {background-color: 5981A4; color: FFFFFF;}
.tbldata {table-layout: fixed; border-collapse: collapse;}
.tbldata td {width: 100px;}</style>
<script>
function scroll()
{
	document.getElementById('tblupright').style.pixelLeft=-document.getElementById('downright').scrollLeft;
	document.getElementById('tbldownleft').style.pixelTop=-document.getElementById('downright').scrollTop;
}
</script>
<div id='upleft' style='position: absolute; top: 10px; left: 10px; width: 50px'></div>
<div id='upright' style='position: absolute; top: 10px; left: 60px; width: 500; overflow-x: hidden; overflow-y: scroll'>
	<table class='tblcols' id='tblupright' style='position: relative; top: 0px; left: 0px'><tr>
<script>
for (i=0; i<20; i++) document.write('<td>'+i+'</td>');
</script></tr></table></div>
<div id='downleft' style='position: absolute; top: 28px; left: 10px; width: 50px; height: 300px; overflow-x: scroll; overflow-y: hidden; background-color: 5981A4'>
	<table class='tblrows' id='tbldownleft' style='position: relative; top: 0px; left: 0px'>
<script>
for (i=0; i<40; i++) document.write('<tr><td>'+i+'</td></tr>');
</script></table></div>
<div id='downright' onScroll='scroll()' style='position: absolute; top: 28px; left: 60px; width: 500; height: 300px; overflow: auto'>
	<table class='tbldata'>
<script>
for (i=0; i<40; i++) 
{
	document.write('<tr>');
	for (j=0; j<20; j++) document.write('<td>'+i+'.'+j+'</td>');
	document.write('</tr>');
}
</script></table></div>

Надо еще много доработать но смысл такой.
Тока в опере это не работает.
И еще хотелось бы узнать можно ли прокрутить соседние элементы div?