Una tabla con un encabezado fijo y una primera columna fija

Hemos cubierto esas celdas individuales y podemos serlotablethtdposition: 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 de filas (como esta demostración ).

Pero la adherencia no es sólo para la parte superior de la pantalla, puedes pegar cosas en cualquier dirección de desplazamiento (la horizontal es igual de divertida ). 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 en video de una tabla que incluye tanto el encabezado como la primera columna:

¿Por qué harías eso? Específicamente para datos tabulares donde el punto es la referencia cruzada. En esta tabla (que representa, por supuesto, el juego de béisbol puntuable donde 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 la entrada. para desplazarte, ya que perderías el contexto de lo que estás viendo.

No todas las tablas necesitan tener referencias cruzadas bidireccionales. Muchas tablas pueden dividir filas en bloques en pantallas pequeñas para una mejor experiencia en pantalla pequeña.

El “truco” en juego aquí es en parte el position: sticky;uso, pero más aún para mí, cómo hay que manejar los elementos superpuestos. Una celda de tabla fija debe tener un fondo, porque de lo contrario veremos contenido superpuesto. También necesita z-indexun manejo adecuado para que cuando se pegue en su lugar, quede encima de lo que se supone que debe estar encima. Esta parece la parte más complicada:

• Asegúrese de que las tbodythceldas estén encima de las celdas normales de la tabla, para que permanezcan en la parte superior durante el desplazamiento horizontal.
• Asegúrese de que las theadthceldas estén encima de ellas, para el desplazamiento vertical.
• Asegúrese de que la theadth:first-childcelda sea la más alta, ya que debe estar por encima de las celdas del cuerpo y de 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 me parece correcto, Estelle siempre va un par de años por delante de mí.