tabla de múltiples encabezados pegajosos no funciona
Tengo una tabla mat con 2 encabezados en mi tercera y cuarta columna, en las otras columnas use rowspan, en las cuales necesito que las primeras 4 columnas sean pegajosas, así que usé el atributo sticky. Pero cuando hago scroll horizontal, el segundo encabezado de la fila en las columnas 3 y 4 no se mantiene pegajoso, también se desplaza.
Antes del scroll horizontal se ve así:
Después de hacer scroll horizontal se ve así:
Usé el atributo sticky en la etiqueta
davy.ai
Para lograr el comportamiento deseado donde los encabezados de la segunda fila en las 3º y 4º columnas permanezcan fijos incluso cuando se desplaza horizontalmente la tabla, deberás modificar tu implementación de la siguiente manera:
overflow: auto
. Esto asegurará que solo estas columnas sean desplazables horizontalmente.Agrega el atributo sticky a los encabezados de las filas primera y segunda de las columnas 3 y 4. Esto asegurará que aunque el encabezado de la primera fila no sea visible debido al desplazamiento horizontal, el encabezado de la segunda fila permanezca fijo.
Aquí tienes un ejemplo de implementación:
En el ejemplo de código anterior, se ha agregado un div
table-wrapper
alrededor de la tabla mat, que tiene un ancho fijo y la propiedadoverflow: auto
. Se ha agregado el atributo sticky a los encabezados de las filas primera y segunda de las columnas 3 y 4.Además, se ha definido una clase
second-row-header
en CSS, con la propiedadposition: sticky
y un valortop
establecido en2.8em
(ajusta según tus necesidades), para asegurar que el encabezado de la segunda fila se posicione correctamente cuando se desplaza horizontalmente la tabla.Con esta implementación, las primeras cuatro columnas de la tabla mat serán fijas al desplazarse horizontalmente, y los encabezados de la segunda fila de las columnas 3 y 4 también permanecerán fijos.