Como fazer tabelas roláveis ​​com CSS e cabeçalhos fixos

No desenvolvimento web, muitas vezes é necessário criar tabelas com grandes quantidades de dados que requer rolagem. No entanto, manter um cabeçalho fixo enquanto rola o corpo da tabela pode ser um desafio. Veja como você pode conseguir esse efeito:

Estrutura HTML

Primeiro, devemos garantir que nossa estrutura HTML esteja correta. Temos uma div externa com uma barra de rolagem, uma div interna contendo a tabela, e os cabeçalhos da tabela devem estar dentro de um elemento e os dados da tabela dentro de um elemento

 
Estilos CSS
Agora, precisamos estilizar a tabela usando CSS:
/* Separate header from body and allow both to scroll independently */
table tbody, table thead {
  display: block;
}

/* Enable scrolling for the table body */
table tbody {
  overflow: auto;
  height: 100px;
}

/* Fix the width of the header */
th {
  width: 72px;
}

/* Fix the width of the data cells */
td {
  width: 72px;
}
Considerações adicionais
Garanta que todas as células de cabeçalho e dados estejam incluídas nos elementos 
 para alinhamento adequado. Se você quiser larguras de coluna variadas, use o seletor n-filho em CSS.
Nota: Esta abordagem é adequada para tabelas menores. Para tabelas muito grandes, considere usar uma técnica diferente, como virtualização ou uma biblioteca de terceiros.