Nos Web Sites em HTML, quando temos tabelas com muitos dados e com bastantes colunas torna-se complicado, e pouco prático, deslocar a página para cima e para baixo para ver o cabeçalho das colunas, e quando há alguma coisa depois da tabela, temos de fazer scroll até ao fim da tabela para conseguir ver o que está a seguir. Para resolver estes problemas podemos criar uma tabela com scroll e com cabeçalho fixo, como a que é possível ver na imagem seguinte.
Para criar uma tabela deste tipo temos de separar o cabeçalho da tabela e inseri-lo numa nova tabela, ficando com duas tabelas, e de seguida envolvemos a tabela com os dados num DIV com altura fixa e com “overflow:auto” no CSS, de forma a mostrar a scrollbar no DIV se a altura da tabela de dados for maior que a do DIV. Uma desvantagem desta técnica é que só podemos ter uma coluna de tamanho dinâmico, portanto, para as restantes temos de definir tamanho fixo.
CSS:
background: #fff;
border: 1px solid #888;
}
div.scrollTable table.header, div.scrollTable div.scroller table{
width: 100%;
border-collapse: collapse;
}
div.scrollTable table.header th, div.scrollTable div.scroller table td{
border: 1px solid #444;
padding: 3px 5px;
}
div.scrollTable table.header th{
background: #ddd;
}
div.scrollTable div.scroller{
height: 200px;
overflow: auto;
}
div.scrollTable .coluna75px{
width: 75px;
}
div.scrollTable .coluna100px{
width: 100px;
}
div.scrollTable .coluna150px{
width: 150px;
}
HTML:
<table class="header">
<tr>
<th class="coluna75px">Coluna 1</th>
<th class="coluna100px">Coluna 2</th>
<th class="coluna150px">Coluna 3</th>
<th></th>
</tr>
</table>
<div class="scroller">
<table>
<tr>
<td class="coluna75px">1 - 1</td>
<td class="coluna100px">1 - 2</td>
<td class="coluna150px">1 - 3</td>
<td></td>
</tr>
</table>
</div>
</div>