Aquí tienes una implementación de una tabla que permite scroll tanto horizontal como vertical, manteniendo fijas la primera columna y las filas primera y última.
Esta implementación tiene las siguientes características:
position: sticky y left: 0.position: sticky y top: 0.position: sticky y bottom: 0.La implementación utiliza CSS moderno con Tailwind y React para gestionar el estado y las referencias a elementos DOM.
Entendido. Voy a modificar la tabla para que la primera y última fila se desplacen horizontalmente junto con el resto del contenido, mientras mantienen su posición fija verticalmente. Solo la primera columna permanecerá completamente fija.
He modificado la tabla para que cumpla con los requisitos solicitados:
refs) para cada sección scrollable.useEffect) que sincroniza el scroll horizontal entre las tres secciones.overflow-x-auto a las secciones de encabezado y pie para permitir el scroll horizontal.position: sticky.Ahora, cuando hagas scroll horizontal en cualquier parte de la tabla, las tres secciones se desplazarán juntas, manteniendo siempre visible la primera columna.