IMHO.WS - Навигация по таблице

IMHO.WS (https://www.imho.ws/index.php)

- Веб-программирование (https://www.imho.ws/forumdisplay.php?f=29)

- - Навигация по таблице (https://www.imho.ws/showthread.php?t=100933)

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

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

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

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

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

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

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

Код HTML:

<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?