Tabela Responsiva Básica
A implementação mais direta para obter uma tabela responsiva requer um contêiner com overflow-x: auto. Dessa forma, se a tela for muito pequena para mostrar o conteúdo completo, aparecerá uma barra de rolagem horizontal.
Este é um bom primeiro passo para tornar nossa tabela pelo menos legível em telas móveis.
Mas, podemos torná-lo melhor!
Tabela responsiva básica com coluna fixa
Vamos agora fazer com que a primeira coluna permaneça fixa enquanto rolamos. No passado, para fazer isso, tínhamos que usar uma biblioteca JavaScript externa, mas hoje em dia podemos definir com segurança position: sticky aos elementos alvo. Felizmente, esse novo valor de posição tem suporte de navegador decente.
position: sticky
sticky class para as células que queremos que permaneçam pegajosas que disparam esses estilos:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.table-wrapper table .sticky { |
4 |
position: sticky; |
5 |
left: 0; |
6 |
z-index: 10; |
7 |
}
|
8 |
|
9 |
.table-wrapper table td.sticky { |
10 |
background: var(--white); |
11 |
}
|
Agora estamos em boa forma. Tornamos sticky a coluna mais importante da tabela, algo definitivamente útil para nossos usuários.
Mas, podemos ir um pouco mais longe!
Tabela responsiva animada básica com coluna fixa
Seguindo em frente, vamos inicialmente ocultar as bandeiras dos países e mostrá-las depois que começarmos a rolar a tabela. Nesse ponto, também destacaremos as células pegajosas, dando-lhes uma cor intensa.
scrolling class ao wrapper da tabela. Dessa forma, podemos saber quando nossas células de destino estão travadas e fornecer os estilos associados.
Aqui está o JavaScript necessário:
1 |
const tableWrapper = document.querySelector(".table-wrapper"); |
2 |
const scrollingClass = "scrolling"; |
3 |
|
4 |
tableWrapper.addEventListener("scroll", function () { |
5 |
if (this.scrollLeft > 0) { |
6 |
this.classList.add(scrollingClass); |
7 |
} else { |
8 |
this.classList.remove(scrollingClass); |
9 |
}
|
10 |
});
|
E alguns dos estilos relevantes:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.table-wrapper.scrolling .sticky { |
4 |
min-width: 75px; |
5 |
color: var(--white); |
6 |
background: var(--darkblue); |
7 |
}
|
8 |
|
9 |
.table-wrapper.scrolling table th.sticky span { |
10 |
opacity: 0; |
11 |
}
|
12 |
|
13 |
.table-wrapper.scrolling table td.sticky > span:first-child { |
14 |
opacity: 1; |
15 |
}
|
16 |
|
17 |
.table-wrapper.scrolling table td.sticky > span:last-child { |
18 |
opacity: 0; |
19 |
}
|
Conclusão
Existem muitos padrões diferentes para criar tabelas de dados responsivas. O padrão que você seguirá dependerá de vários fatores, como tamanho dos dados, colunas, design etc. .
Você pode ir a partir daí como quiser: aplicando diferentes animações, tornando outras colunas fixas, etc. Não há limites para sua imaginação! Em suma, o objetivo final é permitir que os usuários verifiquem os dados facilmente e entendam o que leram.
Por último, mas não menos importante, position: sticky pode ser um ótimo candidato para criar cabeçalhos de tabela fixos sem problemas. Se você, no entanto, estiver interessado em uma implementação JavaScript desse conceito, dê uma olhada neste tutorial.
Como sempre, obrigado pela leitura!
Referências HTML
