No fue hace mucho tiempo cuando miré encabezados y pies de página adhesivos en HTML <table>s en la publicación del blog Una tabla con un encabezado adhesivo y una primera columna adhesiva. En ella, nunca usé position: sticky en cualquier <thead>, <tfoot>, o <tr> elemento, porque aunque Safari y Firefox podían hacer eso, Chrome no podía. Pero podría hacer celdas de tabla como <th> y <td>, que fue una solución bastante decente.
Bueno, eso ha cambiado.
Escuché a través de Twitter que Chrome “reescribió tablas” en v91.https: //t.co/vTBplXWWtT
Lo vi caer, actualizar e hice una prueba rápida. HEY LOOK PEGAJOSOS ENCABEZADOS DE MESA Y PIE DE PIE.@CodePen https://t.co/8eCP1GMer0
(Funciona también en Safari y Firefox) pic.twitter.com/rBN3bXm5iD
– Chris Coyier (@chriscoyier) 4 de junio de 2021
Parece que se hizo un gran esfuerzo para renovar totalmente las tablas en el motor de renderizado en Chromium, para ponerlas al día. No es solo la rigidez que se corrigió, sino todo tipo de cosas. Me enfocaré en la cosa pegajosa ya que eso es lo que miré.
El titular para mí es que <thead> y <tfoot> son pegajosas. Ese parece ser el caso de uso más común aquí.
table thead,
table tfoot {
position: sticky;
}
table thead {
inset-block-start: 0; /* "top" */
}
table tfoot {
inset-block-end: 0; /* "bottom" */
}Eso funciona en los tres principales navegadores. Es posible que desee ser inteligente y solo pegarlos en ciertas alturas mínimas de ventana gráfica o algo así, pero el punto es que funciona.
También escuché varias preguntas sobre las columnas de la tabla. Mi artículo original tenía una primera columna pegajosa (ese era el punto). Mientras haya una mesa <col> etiqueta, es … raro. En realidad, no ajusta las columnas, es más como un puntero para poder estilizar la columna si es necesario. Casi nunca lo veo usado, pero está ahí. De todos modos, no puedes totalmente position: sticky; a <col>, pero puedes crear columnas pegajosas. Debe seleccionar todas las celdas en esa columna y pegarlas a la izquierda o derecha. Aquí está el uso de propiedades lógicas …
table tr th:first-child {
position: sticky;
inset-inline-start: 0; /* "left" */
}Aquí hay una mesa desagradable donde el <thead>, <tfoot>, y la primera y la última columna son todas pegajosas.
Estoy seguro de que podrías hacer algo de buen gusto con esto. Como tal vez:
Una fila / columna de tabla “pegajosa” puede ser un buen toque. Aquí hay un ejemplo de @destroytoday https://t.co/uN3nIisHxF pic.twitter.com/KttE5puBqZ
– Chris Coyier (@chriscoyier) 2 de junio de 2021