Por favor, fixem os títulos da tabela

Por favor, fixem os títulos da tabela

• É comum encontrar grandes conjuntos de dados ou layouts de tabela na web.
• O problema surge quando começamos a rolar uma tabela com centenas de linhas.
• Quando o cabeçalho da tabela desaparece, fica difícil para o usuário lembrar a que cada coluna se refere.

Cabeçalhos fixos

• Cabeçalhos fixos parecem mágica, mas são muito fáceis de implementar.
• Basta adicionar apenas duas propriedades CSS ao thead:
  • position: sticky;
  • top: 0;
• Com cerca de 96% de suporte no mundo todo, sticky é compatível de forma estável com muitos navegadores.
• Isso também ajuda a melhorar a experiência do usuário.

Opinião do GN⁺

• Ao lidar com grandes tabelas em sites, permitir que o usuário veja facilmente os títulos da tabela mesmo ao rolar para baixo melhora bastante a experiência do usuário.
• O fato de ser possível fixar o cabeçalho da tabela de forma simples usando a propriedade CSS position: sticky; é uma informação útil para desenvolvedores web.
• Como esse recurso tem amplo suporte, desenvolvedores web podem saber que é possível implementá-lo com estabilidade em vários navegadores.

[GN⁺]

Comentários do Hacker News

• Cabeçalhos fixos em um eixo são possíveis, mas ainda estamos esperando o dia em que o CSS dará suporte em ambos os eixos: link para issue no GitHub
• Tenho criado apps web funcionais mesmo quase sem conhecimento de CSS. Recentemente tentei usar cabeçalhos fixos em uma tabela com mais de 20.000 linhas, mas surgiam efeitos colaterais estranhos ao testar sugestões de classes do Bootstrap, Stack Overflow, GPT e CodePen. Porém, usei o CodePen deste post e resolvi em 2 minutos, aplicando em produção. Fica aqui meu agradecimento.
• Parece que fixar o cabeçalho da tabela com position: sticky; deveria ser fácil, mas surgem problemas quando se faz certas coisas com o conteúdo da tabela. Por exemplo, adicionei um recurso para restaurar a posição de rolagem quando o usuário rola a tabela, sai da página e depois volta; porém, a posição restaurada sempre ficava uma linha abaixo. Ao olhar através do cabeçalho transparente da tabela, a linha desejada estava no topo, mas o cabeçalho a cobria e a linha seguinte aparecia como a primeira visível. Ajustar a posição de rolagem levando em conta a altura do cabeçalho funcionava no início, mas às vezes ficava alguns pixels fora. Isso acontecia porque a tabela é grande, então há lazy loading em resposta ao evento de rolagem, e também porque eu estava usando layout automático de tabela, o que às vezes fazia as células do cabeçalho ficarem estreitas demais, quebrando palavras em várias linhas e aumentando a altura total do cabeçalho. A solução final foi criar um ResizeObserver no elemento do cabeçalho para ajustar dinamicamente a posição de rolagem quando a altura mudasse. Documentação do ResizeObserver
• Se você também quiser fixar as bordas do cabeçalho da tabela, pode usar o seguinte CSS:

  table thead:before {
    content: '';
    position: absolute;
    width: 100%;
    top: 0;
    border-top: 2px solid;
  }
  
  table thead:after {
    content: '';
    position: absolute;
    width: 100%;
    bottom: 0;
    border-bottom: 1px solid;
  }
  

• Seria bom se os cabeçalhos de tabela fossem fixados automaticamente. Se os desenvolvedores já estão tendo o trabalho extra de usar a tag <th>, é bem provável que esse seja o comportamento desejado.
• Na linha de comando, é melhor enviar o cabeçalho para o stderr e o corpo para o stdout. Caso contrário, ao ordenar, o cabeçalho pode acabar misturado no resultado.
• O Chrome já impediu no passado o uso da propriedade position: sticky nos elementos <thead> e <tr>: link para issue no Chromium
• Em vez de cabeçalhos fixos, alguém sugere usar uma altura de viewport limitada para que o cabeçalho esteja sempre visível. Por exemplo, é assim no DataGridXL: link para DataGridXL (a pessoa informa que é o criador)
• No exemplo do CodePen, definir top levando a borda em conta (por exemplo, 0 em vez de -1px) pode evitar que o corpo da tabela escorra por cima do cabeçalho. Há uma comparação entre dois exemplos do CodePen: CodePen original e CodePen melhorado
• Alguns têm vontade de dizer: "por favor, não façam isso": link para discussão no Hacker News