Por favor, fijen los encabezados de la tabla

Por favor, fijen los encabezados de la tabla

• En la web, a menudo nos encontramos con conjuntos de datos grandes o diseños de tabla.
• En una tabla con cientos de filas, el problema aparece cuando empiezas a desplazarte.
• Si el encabezado de la tabla desaparece, al usuario le resulta difícil recordar con qué se relaciona cada columna.

Encabezados fijos

• Los encabezados fijos parecen magia, pero implementarlos es muy fácil.
• Solo hace falta agregar dos propiedades CSS a thead:
  • position: sticky;
  • top: 0;
• sticky, con una tasa de compatibilidad global de alrededor del 96%, funciona de forma estable en muchos navegadores.
• También ayuda a mejorar la experiencia de usuario.

La opinión de GN⁺

• Al trabajar con tablas grandes en un sitio web, permitir que el usuario siga viendo fácilmente los encabezados de la tabla mientras se desplaza mejora mucho la experiencia de usuario.
• Saber que se puede fijar fácilmente el encabezado de la tabla usando la propiedad CSS position: sticky; es información útil para los desarrolladores web.
• Como esta función tiene un amplio soporte, los desarrolladores web pueden saber que pueden implementarla de forma estable en distintos navegadores.

[GN⁺]

Opiniones de Hacker News

• Los encabezados fijos (sticky headers) en un solo eje son posibles, pero siguen esperando el día en que CSS lo soporte en ambos ejes: enlace al issue de GitHub
• A pesar de casi no saber CSS, ha logrado crear aplicaciones web funcionales. Hace poco intentó poner encabezados fijos en una tabla de más de 20,000 filas, pero al probar clases de Bootstrap y sugerencias de Stack Overflow, GPT y CodePen, aparecían efectos secundarios extraños. Sin embargo, usó el CodePen de este artículo, lo resolvió en 2 minutos y lo aplicó en producción. Expresa su agradecimiento.
• Parece que fijar el encabezado de una tabla con position: sticky; debería ser fácil, pero surgen problemas cuando se hace cualquier cosa con el contenido de la tabla. Por ejemplo, agregó una función para restaurar la posición de desplazamiento cuando un usuario hace scroll en la tabla, sale de la página y luego regresa, pero la posición restaurada siempre queda desplazada una fila hacia abajo. Al mirar a través de un encabezado de tabla transparente, la fila deseada está arriba del todo, pero como el encabezado se superpone, la siguiente fila es la primera visible. Si se ajusta la posición de scroll teniendo en cuenta la altura del encabezado, al principio funciona bien, pero a veces se desfasa por unos pocos píxeles. Esto ocurre porque la tabla es grande, así que hace carga diferida según los eventos de scroll, y además usa diseño automático de tabla, por lo que a veces las celdas del encabezado se vuelven demasiado estrechas, las palabras saltan de línea y la altura total del encabezado aumenta. La solución final fue crear un ResizeObserver sobre el elemento del encabezado para ajustar dinámicamente la posición de scroll cuando cambia la altura. Documentación de ResizeObserver
• Si también quieres fijar los bordes del encabezado de la tabla, puedes usar el siguiente código CSS:

  table thead:before {
    content: '';
    position: absolute;
    width: 100%;
    top: 0;
    border-top: 2px solid;
  }
  
  table thead:after {
    content: '';
    position: absolute;
    width: 100%;
    bottom: 0;
    border-bottom: 1px solid;
  }
  

• Ojalá los encabezados de tabla se fijaran automáticamente. Si los desarrolladores se toman el trabajo extra de usar etiquetas <th>, es muy probable que ese sea el comportamiento que quieren.
• En la línea de comandos, conviene enviar los encabezados a stderr y el cuerpo a stdout. De lo contrario, al ordenar, el encabezado puede mezclarse con los resultados.
• En el pasado, Chrome no permitía usar la propiedad position: sticky en los elementos <thead> y <tr>: enlace al issue de Chromium
• Se propone usar una altura de viewport limitada en lugar de encabezados fijos, para que el encabezado siempre permanezca visible. Por ejemplo, así lo hacen en DataGridXL: enlace a DataGridXL (aclara que es una creación del autor)
• En el ejemplo de CodePen, si top se configura teniendo en cuenta el borde (por ejemplo, 0 en lugar de -1px), se puede evitar que el cuerpo de la tabla fluya por encima del encabezado. Se comparan dos ejemplos de CodePen: CodePen original y CodePen mejorado
• Algunos quieren decir: "por favor, no lo hagan": enlace a la discusión en Hacker News