«
»

HTML – Tabela com cabeçalho e tamanho fixo

Publicado por Hugo Pires / Sem Comentários

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.

Tabela com scroll e cabeçalho fixo

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
div.scrollTable{
    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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="scrollTable">
    <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>

Ver Exemplo – Tabela com scroll

Não existem artigos relacionados.


Na categoria Programação

Não encontrou o que procura?

Comentar