Hemos cubierto a ese individuo <table> células, <th> y <td> puede ser position: sticky. Es bastante fácil hacer que el encabezado de una tabla se adhiera a la parte superior de la pantalla mientras se desplaza por un grupo o filas (como esta demostración).
Pero la adherencia no es solo para la parte superior de la pantalla, puede pegar cosas en cualquier dirección de desplazamiento (horizontal es igual de divertido). De hecho, podemos tener múltiples elementos adhesivos pegados en diferentes direcciones dentro del mismo elemento, e incluso elementos individuales que están pegados en múltiples direcciones.
Aquí hay un ejemplo de video de una tabla que pega tanto el encabezado como la primera columna:
¿Por qué harías eso? Específicamente para datos tabulares donde la referencia cruzada es el punto. En esta tabla (que representa, por supuesto, el juego de béisbol de puntuación en el que de alguna manera 20 equipos juegan entre sí a la vez porque así es como funciona el béisbol), “tiene sentido” que no quieras el nombre del equipo o el número de entrada. para desplazarse, ya que perdería el contexto de lo que está viendo.
No todas las tablas deben tener referencias cruzadas bidireccionales. Muchas tablas pueden romper filas en bloques en pantallas pequeñas para una mejor experiencia de pantalla pequeña.
El “truco” en juego aquí es parcialmente el position: sticky; uso, pero más para mí, cómo tienes que manejar elementos superpuestos. Una celda de la tabla que es pegajosa debe tener un fondo, porque de lo contrario veremos contenido superpuesto. También necesita una adecuada z-index manejo de modo que cuando se pegue en su lugar, esté encima de lo que se supone que debe estar encima. Esta parece la parte más complicada:
- Asegúrate que
tbody>thlas celdas están por encima de las celdas normales de la tabla, por lo que permanecen en la parte superior durante un desplazamiento horizontal. - Asegúrate que
thead>thlas celdas están por encima de aquellas, para el desplazamiento vertical. - Asegúrate que
thead>th:first-childcell es el más alto, ya que debe estar por encima de las células del cuerpo y sus encabezados hermanos nuevamente para el desplazamiento horizontal.
Un poco de baile, pero es factible.
Choca esos cinco con Cameron Clark, quien me envió un correo electrónico, hizo una demostración de esto y me mostró lo genial que es. Y de hecho, Cameron, es genial. Cuando compartí eso, Estelle Weyl me mostró una demostración que hizo hace varios años. Eso se siente bien, Estelle siempre está un par de años por delante de mí.