Criar uma tabela com título fixo e barra de rolagem no restante é importante e vantajoso em diversas situações, especialmente quando lidamos com conjuntos extensos de dados.
Nesse post irei criar uma tabela com título fixo que permita que o cabeçalho da tabela permaneça visível à medida que o usuário rola para baixo a barra de rolagem do navegador, o que facilita a referência dos rótulos das colunas e a compreensão do conteúdo apresentado.
Dica: clique aqui para ver outros posts sobre HTML.
Iremos criar a seguinte tabela em HTML para servidor como exemplo,
Dados Pessoais
| Nome | Idade | Cidade | Profissão |
|---|---|---|---|
| Maria | 30 | São Paulo | Engenheira |
| João | 25 | Rio de Janeiro | Estudante |
| Ana | 35 | Belo Horizonte | Médica |
| Pedro | 28 | Recife | Advogado |
Tags importantes
Nos exemplos abaixo temos que destacar as tags responsáveis pela fixação da linha dos títulos da nossa tabela. Essa fixação é feita na folha de estilo (ou CSS).
- definimos a propriedade position como “sticky” e especificamos “0” como um valor da propriedade top para o elemento .
A propriedade position indica o tipo de posicionamento de um elemento.
Poderíamos usar também a display como “block” em <thead> e <tbody> para que possamos aplicar as propriedades de altura e overflow.
A propriedade display indica como um elemento deve ser exibido.
Abaixo estão as linhas HTML responsáveis por criar a tabela de exemplo acima:
<div class="cabecalhoFixado">
<table>
<thead>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Cidade</th>
<th>Profissão</th>
</tr>
</thead>
<tbody>
<tr>
<td>Maria</td>
<td>30</td>
<td>São Paulo</td>
<td>Engenheira</td>
</tr>
<tr>
<td>João</td>
<td>25</td>
<td>Rio de Janeiro</td>
<td>Estudante</td>
</tr>
<tr>
<td>Ana</td>
<td>35</td>
<td>Belo Horizonte</td>
<td>Médica</td>
</tr>
<tr>
<td>Pedro</td>
<td>28</td>
<td>Recife</td>
<td>Advogado</td>
</tr>
</tbody>
</table>
</div>
Coloque essas linhas entre as tags <body> e </body> da sua página.
Estilo CSS para nossa tabela de exemplo
Coloque o estilo CSS abaixo entre as tags <head> e </head> da sua página HTML
<style>
.cabecalhoFixado {
overflow-y: auto;
height: 110px;
}
.cabecalhoFixado thead th {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 15px;
border: 2px solid #529432;
}
th {
background: #ABDD93;
}
</style>
Você pode alterar a altura da tabela modificando o valor height: 110px; para outro maior em seu CSS.
Veja como ficou:
