Esta plantilla hace que los encabezados de las columnas de una tabla se mantengan en la parte superior de la pantalla a medida que se desplazan los datos de la tabla hacia adentro y hacia afuera de la vista. Se utiliza en tablas altas que tienen encabezados de columnas que pueden ser difíciles de recordar a medida que se desplaza por los datos.
Incluya esta plantilla agregando {{sticky header}}o redireccionando {{sticky-header}}sobre una tabla. Agregue una de las siguientes clases al wikitexto de inicio de la tabla.
La sticky-headerclase se utiliza para que la primera fila del encabezado sea fija. No es obligatorio que sea sortable.
.svg/1280px-Test_Template_Info-Icon_-_Version_(2).svg.png){kind=icon}
{{ encabezado fijo }} {| clase = "wikitable sortable sticky-header" |+ Título |- ! Color !! A !! B ! clase = "no clasificable" | C |- clase = sorttop | '''Máx.'' ' || 10 || 11 || 12 |- | Rojo || 1 || 2 || 3 |- | Lima || 4 || 5 || 6 |- | Dorado || 7 || 8 || 9 |- | Azul || 10 || 11 || 12 |- clase = sortbottom | '''Total''' || 22 || 26 || 30 |} La sticky-header-multiclase se utiliza para hacer que varias filas de encabezados se mantengan fijas. Se requiere una tabla ordenable, ya que actualmente la ordenabilidad es la única forma de mover filas consecutivas de encabezados de columnas al <thead>elemento. Si algunas o todas las columnas no se deben ordenar, class=unsortablese pueden colocar en la celda de encabezado con el ícono de ordenación. La parte superior de la tabla seguirá estando fija. Consulte Ayuda:Tablas ordenables . Si JavaScript está deshabilitado, entonces la ordenabilidad y esta solución no funcionarán.
Evite usar la sorttopclase, ya que sortable mueve esas filas al <thead>elemento después de ordenarlas, lo que también las hace persistentes en la parte superior. Una solución podría ser moverlas a la parte inferior y usar la sortbottomclase en su lugar.
{{ encabezado fijo }} {| clase = "wikitable sortable sticky-header-multi" |+ Título |- ! rowspan = 2 | Color ! colspan = 3 | Datos |- ! A !! B ! clase = "no clasificable" | C |- | Rojo || 1 || 2 || 3 |- | Lima || 4 || 5 || 6 |- | Dorado || 7 || 8 || 9 |- | Azul || 10 || 11 || 12 |- clase = sortbottom | '''Máx.''' || 10 || 11 || 12 |- clase = sortbottom | '''Total''' || 22 || 26 || 30 |} Las filas consecutivas de encabezados de columnas son fijas en la parte superior, así que evite agregar una fila de encabezados justo debajo de los encabezados de columna que no se aplican a toda la tabla, como un encabezado de sección destinado a separar visualmente la tabla.
Una solución podría ser mover cada sección a una columna o tablas separadas, lo que también evita problemas de accesibilidad según MOS:COLHEAD .
Otra solución podría ser agregar una fila en blanco de celdas de datos ( | colspan=4 |) entre la última fila de encabezado de columna y la primera fila de encabezado de sección para que esta última no se incluya en las filas de encabezado consecutivas.
{{ encabezado fijo }} {| clase = "wikitable sortable sticky-header-multi" |+ Título |- ! rowspan = 2 | Color ! colspan = 3 | Datos |- ! A !! B !! C |- | colspan = 4 | |- ! colspan = 4 | Sección 1 |- | Rojo || 1 || 2 || 3 |- | Lima || 4 || 5 || 6 |- ! colspan = 4 | Sección 2 |- | Dorado || 7 || 8 || 9 |- | Azul || 10 || 11 || 12 |} Evite filas de encabezado excesivamente altas que puedan bloquear demasiados datos o todos ellos cuando se muestran en una pantalla móvil pequeña, especialmente en orientación horizontal . Algunas soluciones podrían ser mover parte del texto del encabezado al título de la tabla, usar un texto de encabezado más conciso, eliminar saltos de línea ( <br>) en los encabezados o dividir la tabla en tablas más pequeñas para reducir los encabezados.
Probado en navegadores con Windows 10 , Windows 11 , iOS 17 ( iPhone SE 2020 y iPhone 14 Pro Max ) y Android 14 ( Samsung Galaxy S21 ).
<div style="overflow:auto"></div>- No utilice esta opción cerca de las tablas. Evita que los encabezados queden fijos hasta que se eliminen. Consulte la diferencia. Consulte la tabla "Lista por región".Más estilos de plantillas para tablas: