como ancorar cabeçalhos em uma tabela HTML rolável

incorporando cabeçalhos de tabela fixa e corpos de tabela rolagem podem ser um requisito comum nas aplicações da web . No entanto, encontrar uma solução eficaz pode ser desafiadora. Este guia explorará a solução para esse problema, orientando -o através da implementação. técnicas. Uma solução popular é empregar uma técnica conhecida como rolagem dupla. Isso envolve a criação de duas tabelas aninhadas: uma tabela externa que contém o cabeçalho fixo e uma tabela interna rolável para o corpo da tabela. para as tabelas:

/ * tabela externa (cabeçalho corrigido) */ #tabela externa { largura: 100%; Altura: 100px; / * Defina uma altura fixa para o cabeçalho */ estouro: oculto; } / * Tabela interna (corpo rolável) */ #tabela interna { Altura: Calc (100% - 100px); / * Calcule a altura com base na altura da tabela externa */ Overflow-y: rolagem; }

a seguir, use JavaScript para ajustar a altura da tabela interna dinamicamente: '); const innertable = document.getElementById ('interna-mesa'); // Calcule a altura da tabela interna com base na altura da tabela externa innertable.style.Height = `$ {OuterTable.clientHeight - 100} px`;

/* Outer table (fixed header) */
#outer-table {
  width: 100%;
  height: 100px; /* Set a fixed height for the header */
  overflow: hidden;
}

/* Inner table (scrollable body) */
#inner-table {
  height: calc(100% - 100px); /* Calculate the height based on the outer table's height */
  overflow-y: scroll;
}

Para um exemplo de trabalho, consulte o seguinte código de código:

Esta solução congela efetivamente o cabeçalho da tabela enquanto permite que o corpo da tabela role suavemente. Ao implementar essas técnicas, você pode criar tabelas responsivas e interativas que atendam aos seus requisitos específicos.