No puedes position: sticky; a <thead>. Ni un <tr>. Pero puedes pegar un <th>, lo que significa que puede crear encabezados adhesivos dentro de un viejo <table>. Esto es complicado, porque si no conocieras esta extraña peculiaridad, sería difícil culparte. Tiene mucho más sentido pegar un elemento principal como el encabezado de la tabla en lugar de cada elemento individual en una fila.
El problema se reduce al hecho de que la rigidez requiere position: relative para trabajar y eso no se aplica a <thead> y <tr> en la especificación CSS 2.1.
Hay dos reacciones muy extremas a esto, en caso de que necesite implementar encabezados de tabla adhesivos y no tenga en cuenta las <th> solución alterna.
- No utilices el marcado de tabla en absoluto. En su lugar, utilice diferentes elementos (
<div>sy otras cosas) y otros métodos de diseño CSS para replicar el estilo de una tabla, pero sin bloquear el usoposition: relativey creandoposition: stickyelementos padres. - Usar elementos de la tabla, pero elimine por completo todos sus estilos predeterminados con nuevos
displayvalores.
El primero es peligroso porque no está utilizando elementos semánticos y accesibles para que el contenido se lea y navegue. El segundo es casi el mismo. Puede seguir ese camino, pero debe tener mucho cuidado de volver a aplicar roles semánticos.
De todos modos, nada de eso importa si te limitas (¿entiendes?) sticky valor en esos <th> elementos.
Ver la pluma
Encabezados de tabla adhesivos con CSS por Chris Coyier (@chriscoyier)
en CodePen.
Probablemente sea un poco extraño tener encabezados de tabla como una fila en el medio de una tabla, pero solo ilustra la idea. Me estaba imaginando barras de encabezado de colores que separaban a los jugadores de diferentes equipos deportivos o algo así.
Cada vez que pienso en tablas de datos, también pienso en lo complicado que puede ser hacer que respondan. Afortunadamente, hay una variedad de formas, todas dependiendo de la mejor forma de agrupar y explorar los datos que contienen.