---
title: "Como congelar cabeçalhos de tabelas"
slug: "how-to-freeze-table-headers"
updated: 2026-06-22T08:58:57Z
published: 2026-06-22T08:58:57Z
canonical: "docs.document360.com/how-to-freeze-table-headers"
---
> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 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.
NOTA
O Document360 oferece uma [funcionalidade embutida de congelamento de tabelas](/help/docs/pt/tables-in-advanced-wysiwyg-editor#freeze-rows-columns) no editor avançado WYSIWYG que permite congelar uma linha ou coluna de cabeçalho sem nenhum código personalizado. Use os passos abaixo apenas se precisar de uma solução baseada em CSS.
---
## 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:
```
```
---
## 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;
}
```
1. 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:
```
```
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
| Item | Detalhes |
| --- | --- |
| Escopo | Por tabela — apenas tabelas envolvidas em `<div class="fixed-header-table">` são afetadas |
| Altura padrão do scroll | 400px — ajuste `max-height` no CSS para mudar quando a rolagem ativar |
| Alternativa embutida | O editor Advanced WYSIWYG possui um [recurso nativo de congelamento de tabelas](/help/docs/pt/tables-in-advanced-wysiwyg-editor#freeze-rows-columns) que não requer código personalizado |
---
## 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.