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.

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:

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

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;
}

3. 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:

<div class="fixed-header-table">
Your table code
</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

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.