Como congelar cabeçalhos de tabelas

Congelar o cabeçalho da tabela mantém os títulos das colunas visíveis enquanto o leitor percorre tabelas longas, facilitando a interpretação dos dados sem precisar voltar para o topo.

Quando usar cabeçalhos de tabela congelados

• Tabelas de referência longas — quando uma tabela tem muitas linhas, os leitores perdem a noção de qual coluna estão lendo enquanto rolam para baixo. Um cabeçalho congelado elimina esse problema.
• Tabelas comparativas — congelar o cabeçalho garante que os rótulos das colunas permaneçam visíveis quando os leitores percorrem linhas de opções comparáveis.
• Artigos com muitos dados — qualquer tabela alta o suficiente para exigir rolagem se beneficia de um cabeçalho fixo.

Como isso funciona

Essa abordagem utiliza dois componentes:

• CSS personalizado — torna o contêiner da tabela rolável e fixa a linha do cabeçalho no topo da área visível.
• Wrapper HTML por artigo — o CSS só ativa para tabelas encapsuladas em <div class="fixed-header-table">, então não afeta todas as tabelas do site. Você aplica a embalagem individualmente em cada tabela que precisa de um cabeçalho congelado.

Referência rápida

Trecho de CSS — cole uma vez nas configurações de CSS personalizadas:

.fixed-header-table div[data-type="table-content"] {
    position: relative;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #ddd;
}
table {
    width: 100%;
    border-collapse: collapse;
}
tbody th {
    position: sticky;
    top: 0;
    z-index: 2;
}

Wrapper HTML por artigo — enrole seu código de tabela nesta div na visualização de código:

<div class="fixed-header-table">
Your table code
</div>

Como congelar um cabeçalho de tabela

Adicionar o CSS

1. No portal da Base de Conhecimento, acesse Configurações > site da Base de Conhecimento > CSS & JavaScript Personalizados.
2. Selecione a aba CSS e cole o seguinte trecho:

.fixed-header-table div[data-type="table-content"] {
    position: relative;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #ddd;
}
table {
    width: 100%;
    border-collapse: collapse;
}
tbody th {
    position: sticky;
    top: 0;
    z-index: 2;
}

3. Clique em Salvar.

Embrulhe a tabela no artigo

1. Abra o artigo contendo a tabela que você quer congelar.
2. Mude para a visão de código.
3. Localize o HTML da tabela e o encapsule dentro do seguinte div:

<div class="fixed-header-table">
Your table code
</div>

A linha de cabeçalhos agora permanece fixa no topo da tabela enquanto o leitor percorre o conteúdo.

Desfecho

Quando um leitor percorre uma tabela longa, os cabeçalhos das colunas permanecem visíveis no topo da tabela.

Escopo e cobertura

Melhores práticas

• Ajuste max-height para combinar com seu conteúdo — o padrão de 400px obras na maioria dos casos, mas para tabelas muito densas ou requisitos específicos de layout, aumente esse valor para que os leitores não precisem rolar a tela dentro de uma tabela cedo demais.
• Use o recurso de congelamento embutido sempre que possível — se você estiver trabalhando no editor avançado WYSIWYG, a funcionalidade nativa de congelamento é mais simples de aplicar e não requer acesso à visão de código.
• Aplique o wrapper apenas em tabelas que precisam — como a classe precisa ser adicionada manualmente por tabela, você tem controle total sobre quais tabelas travam e quais não. Reserve para tabelas altas o suficiente para realmente se beneficiar de um cabeçalho fixo.
• Teste após aplicar — mude para a pré-visualização do site da Knowledge Base após enrolar uma tabela para confirmar que o cabeçalho fica corretamente e que o contêiner de rolagem é renderizado na altura esperada.