Depois do lançamento deste plugin aqui no blog, vou mostrar sua utilização. A única complexidade é a utilização de rowspan e colspan na tabela. Vamos lá!

Includes necessários:

<script type="text/javascript" src="jquery/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery/jquery.scrollTable.js"></script>

Estrutura HTML
Para imprimir as linhas, usei um for simples do PHP.
Na declaração do div class=”main”, adicionei um style para funcionar o “opacity” fora do css apenas para IE. Aprendi isto aqui (vale a pena).

<div class="main" style="filter:alpha(opacity=0)">
<div class="divGridScroll">
<table cellpadding="2" cellspacing="1">
<thead>
<tr>
<th rowspan="2">Column 1</th>
<th rowspan="2">Column 2</th>
<th colspan="2" >Column 3</th>
<th>Column 4</th>
</tr>
<tr>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
</tr>
</thead>
<tbody>
<?php for($i=1;$i<=20;$i++):?>
<tr>
<td><?=$i?></td>
<td>um monte</td>
<td>um monte de coisa aqui</td>
<td>um monte de coisa aqui</td>
<td>um monte de coisa aqui</td>
</tr>
<?php endfor;?>
</tbody>
<tfoot>
<tr>
<th colspan="2">Total</th>
<th>22213</th>
<th>Teste</th>
<th>TESTESTE </th>
</tr>
</tfoot>
</table>
</div>
</div>

Um pouco de CSS

div.main {
font: 11px tahoma;
border:1px solid #dadada;
width:800px;margin:auto;
-moz-opacity:0;
opacity:0;
}
table {
font: 11px tahoma;
width:100%;
background:#fff;
}
table thead th, table tfoot th {
background:#ccc;
text-align:center;
}
table tbody td {
background:#eee;
padding:3px;
}

Usei opacity para não mostrar a tabela antes de receber toda a execução do plugin. Se for alterado para o convencional display:none ou visibility:hidden a renderização da tabela não ficara adequada.

O javaScript.
Estou buscando pelo div class=”divGridScroll” onde esta nossa tabela. Perceba que adicionei uma função chamada onComplete. Esta função tem como objetivo, fazer alguma coisa após a tabela ser renderizada. Neste caso, vamos mostrar o div class=”main”. Outro detalhe, veja que aplico um filtro para validar se o browser é IE. Se for, remove o atributo filter. Se deseja ver o resultado padrão no IE, apenas remova o método filter do chain.

$(function(){
   $('.divGridScroll').scrollTable({
      height:150,
      onComplete:function(){
         $(this).parent().css('opacity',1).filter(function(){
            if ($.browser.msie) {
               this.style.removeAttribute('filter');
            }
         });
      }
   });
});

Testei no IE7,Opera,Chrome e FF.

Até a próxima

[s]

JunioR