---
title: "Cómo congelar cabeceras de tabla"
slug: "how-to-freeze-table-headers"
updated: 2026-06-22T08:48:10Z
published: 2026-06-22T08:48:10Z
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.
# Cómo congelar cabeceras de tabla
Congelar la cabecera de la tabla mantiene visibles los títulos de las columnas mientras el lector navega por tablas largas, facilitando la interpretación de los datos sin tener que volver al principio.
NOTA
Document360 ofrece una [funcionalidad integrada de congelación de tablas](/help/docs/es/tables-in-advanced-wysiwyg-editor#freeze-rows-columns) en el editor avanzado WYSIWYG que permite congelar una fila o columna de cabecera sin necesidad de código personalizado. Usa los pasos de abajo solo si necesitas una solución basada en CSS.
---
## Cuándo usar los encabezados de mesa congelados
- **Tablas de referencia largas** — cuando una tabla tiene muchas filas, los lectores pierden la noción de qué columna están leyendo mientras descienden. Un cabezal congelado elimina ese problema.
- **Tablas comparativas** — congelar el encabezado garantiza que las etiquetas de las columnas sigan siendo visibles cuando los lectores recorren filas de opciones comparables.
- **Artículos con muchos datos** : cualquier tabla lo suficientemente alta como para requerir desplazamiento se beneficia de un encabezado fijo.
---
## Cómo funciona esto
Este enfoque utiliza dos componentes:
- **CSS personalizado** — hace que el contenedor de la tabla sea desplazable y fija la fila de cabecera en la parte superior del área visible.
- **Envoltorio HTML por artículo** — el CSS solo se activa para tablas envueltas en `<div class="fixed-header-table">`, por lo que no afecta a todas las tablas del sitio. Aplicas el envoltorio individualmente en cada tabla que necesita un encabezado congelado.
---
## Referencia rápida
**Fragmento de CSS** — pegar una vez en la configuración de CSS personalizada:
```
.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 artículo** — envuelve tu código de tabla en esta división en la vista de código:
```
```
---
## Cómo congelar una cabecera de tabla
### Añadir el CSS
1. En el portal de la Base de Conocimiento, ve a **Configuración** > **sitio de la Base de Conocimientos** > **CSS y JavaScript personalizados**.
2. Selecciona la pestaña **CSS** y pega el siguiente fragmento:
```
.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. Haz clic **en Guardar**.
### Envuelve la tabla en el artículo
1. Abre el artículo que contiene la tabla que quieres congelar.
2. Cambia a **la vista de código**.
3. Localiza el HTML de la tabla y envuélvelo dentro del siguiente div:
```
```
La fila de cabecera ahora permanece fija en la parte superior de la tabla mientras el lector avanza por el contenido.
---
## Resultado
Cuando un lector desplaza una tabla larga, los encabezados de las columnas permanecen visibles en la parte superior de la tabla.
---
## Alcance y cobertura
| Punto | Detalle |
| --- | --- |
| Alcance | Por tabla — solo las tablas envueltas en `<div class="fixed-header-table">` se ven afectadas |
| Altura predeterminada de desplazamiento | 400px — ajusta `max-height` en el CSS para cambiar cuando se activa el desplazamiento |
| Alternativa incorporada | El editor avanzado WYSIWYG tiene una [función nativa de congelación de tablas](/help/docs/es/tables-in-advanced-wysiwyg-editor#freeze-rows-columns) que no requiere código personalizado |
---
## Mejores prácticas
- **Ajusta `max-height` para que coincida con tu contenido** — el valor por defecto de `400px` las obras en la mayoría de los casos, pero para tablas muy densas o requisitos específicos de diseño, aumenta este valor para que los lectores no tengan que desplazarse demasiado pronto dentro de una tabla.
- **Utiliza la función de congelación integrada siempre que sea posible** : si trabajas en el editor avanzado WYSIWYG, la funcionalidad nativa de congelación es más sencilla de aplicar y no requiere acceso a la vista de código.
- **Aplica el wrapper solo a las tablas que lo necesiten** : como la clase debe añadirse manualmente por tabla, tienes control total sobre qué tablas se congelan y cuáles no. Reserváralo para tablas lo suficientemente altas como para beneficiarse realmente de un encabezado fijo.
- **Prueba después de aplicar** — cambia a la vista previa del sitio de la Base de Conocimientos después de envolver una tabla para confirmar que el encabezado se queda correctamente y que el contenedor de desplazamiento se renderiza a la altura esperada.