Esta plantilla agrega un contenedor desplazable alrededor de una tabla y sus clases se pueden usar para hacer que las filas de la tabla se adhieran a la parte superior o que las columnas se adhieran al lado izquierdo del contenedor a medida que los datos de la tabla se desplazan dentro y fuera de la vista.
Se utiliza en tablas altas y/o anchas que tienen encabezados que pueden resultar difíciles de recordar a medida que se desplaza por los datos. Mantiene las tablas muy anchas dentro del ancho del área de contenido principal, de modo que el diseño de la versión de escritorio de Wikipedia permanece intacto.
En las pantallas más pequeñas se muestra un botón de alternancia para deshabilitar o habilitar estas funciones en los casos en que los elementos fijos grandes son un obstáculo para la lectura de los datos desplazables subyacentes, lo que es más probable en dispositivos pequeños como los teléfonos móviles.
Incluya {{sticky table start}}
arriba y abajo de la tabla. Agregue cualquiera de los siguientes elementos según sea necesario.{{sticky table end}}
Nota: También funciona si la tabla usa la sortable
clase.
{{ Inicio de tabla fija }} {| clase = "wikitable tabla-fija-fila1 tabla-fija-col1" ⫶|} {{ Fin de tabla fija }}
Nota: La sticky-table-head
clase requiere que la tabla use la sortable
clase para que las filas del encabezado de columna se muevan al <thead>
elemento.
La celda "Encabezado 2" usa la sticky-table-none
clase para corregir el problema de fijación izquierda causado por la celda "Encabezado 1" rowspan
.
{{ Inicio de tabla fija }} {| clase = "wikitable sortable sticky-table-head sticky-table-col1" |+ Título |- ! rowspan = "2" | Encabezado 1 ! colspan = "4" | Grupo de encabezados 1 ⫶|- ! class = "sticky-table-none" | Encabezado 2 ! Encabezado 3 !! Encabezado 4 !! Encabezado 5 !! …⫶|} {{ Fin de tabla fija }}
Tenga en cuenta que la tabla de esta sección es básicamente la misma que la de la siguiente sección, excepto que se deja una columna diferente como permanente. Esto significa que la sticky-table-none
clase se utiliza en un encabezado diferente.
Las filas de encabezado son fijas en la parte superior y la primera columna es fija a la izquierda. Cuando rowspan
se produce un error en lo que es fijo, sticky-table-none
se puede utilizar la clase para solucionarlo.
A modo de ilustración, se ha añadido un color de fondo a la tabla:
sticky-table-none
{{ Inicio de tabla fija }} {| clase = "wikitable sortable sticky-table-head sticky-table-col1" |- ! rowspan = "2 | Encabezado 1 ! rowspan = "2" | Encabezado 2 ! colspan = "3" | Grupo de encabezados 1 !! … |- ! clase = "sticky-table-none" | Encabezado 3 ! Encabezado 4 ! Encabezado 5 !! … |- | datos | rowspan = "2" | datos | datos || … |- | datos | clase = "sticky-table-none" | datos | datos || … |- | rowspan = "2" | datos | datos || … |- | clase = " sticky -table-none " | datos | datos || … ⫶|} {{ Fin de tabla fija }}
Las filas de encabezado son fijas en la parte superior y la segunda columna es fija a la izquierda. Cuando se hace que una columna sea fija a la izquierda y rowspan
se estropea lo que es fijo, se pueden usar las clases sticky-table-none
y sticky-table-left
para solucionarlo.
Con fines ilustrativos, se han añadido colores de fondo a la tabla:
sticky-table-none
sticky-table-left
{{ Inicio de tabla fija }} {| clase = "wikitable sortable sticky-table-head sticky-table-col2" |- ! fila = "2 | Encabezado 1 ! fila = "2" | Encabezado 2 ! colspan = "3" | Grupo de encabezados 1 !! … |- ! Encabezado 3 ! clase = "sticky-table-none" | Encabezado 4 ! Encabezado 5 !! … |- | datos | fila = "2" | datos | datos || … |- | datos | clase = "sticky-table-none" | datos | datos || … |- | fila = "2" | datos | datos || … |- | clase = "sticky-table-left" | datos | clase = "sticky-table-none" | datos | datos || … ⫶|} {{ Fin de tabla fija }}
Adaptado de la Lista de abreviaturas de estados y territorios de EE. UU. § Tabla . Limite la ventana de su navegador para ver la columna fija de la izquierda que aparece a continuación.
Las celdas de la columna 1 "Nombre" y la columna 2 "Estado de la región" en la fila 1 suelen rowspan
extenderse a la fila 2. Al hacer que la columna 1 quede fija, esto hace que la primera celda en la fila 2, la celda de clasificación vacía debajo de "ISO", quede fija, por lo que la sticky-table-none
clase se agrega a esa celda.
{{ sticky table start }}{{ mw-datatable }} {| class = "wikitable sortable sticky-table-head sticky-table-col1 mw-datatable" |+ Códigos y abreviaturas de estados, distritos federales, territorios y otras regiones de EE. UU. ! rowspan = 2 | [[Lista de estados y territorios de los Estados Unidos|Nombre]] ! rowspan = 2 | Estado de la región ! [[ISO 3166|ISO]] ! colspan = 2 | [[#Estándar ANSI INCITS 38:2009|ANSI]] ! [[#Códigos postales|USPS]] ! [[#Prefijos de buques de la Guardia Costera|USCG]] ! rowspan = 2 | [[#GPO|GPO]] ! rowspan = 2 | [[#Uso actual de abreviaturas tradicionales|AP]] ! rowspan = 2 | Otras<br>abreviaturas |- ! class = sticky-table-none | !! !! !! !! ⫶ |} {{ sticky table end }}
Adaptado de los récords y estadísticas de singles de la Serie WTA 1000 § Líderes de títulos . Limite la ventana de su navegador para ver la columna fija de la izquierda a continuación.
Nota: Las celdas de la columna 1 "Títulos", "Jugador" y "Años" se han rowspan
eliminado y se han movido de la fila 1 a la fila 2 para facilitar que la fila 2 quede fija en la parte superior. Debido a que la fila 1 está oculta cuando la fila 2 está fija, las otras celdas de la fila 2 tienen un color de fondo para relacionarlas visualmente con las celdas principales "Torneos activos" y "Torneos inactivos" en la fila 1. Las dos celdas de la fila 1 se conservan para los lectores de pantalla en lugar de moverlas a una leyenda. Hacer esto ayuda a reducir la cantidad de contenido fijo en la parte superior: 1 fila en lugar de 2.
Las celdas "10", "9", "6" y "5" de la columna 1 "Títulos" utilizan rowspan
. Al hacer que la columna 2 quede fija, las celdas de las filas distribuidas tienen la columna 2 no fija y la columna 3 fija, por lo que las clases sticky-table-left
y sticky-table-none
se agregan a esas celdas de la columna 2 y la columna 3, respectivamente.
{{ mw-datatable }}{{ ordenar bajo }}{{ inicio de tabla fija }} {| clase = "wikitable mw-datatable ordenable ordenar bajo centro tabla fija fila2 tabla fija columna2" estilo = "text-align:center" ⫶ |- ! ámbito = "fila" fila = "3" | 10 | estilo = "text-align:left" | {{ ordenar | Henin. |{{ bandera | uxx | BEL }} [[ Justine Henin ]]}} | - | - ⫶|- | estilo = "text-align:left; color-de-fondo:#FFFFE0;" clase = "tabla-pegajosa-izquierda" | {{ sort | Azarenka. |{{ flagg | uxx | BLR }} ''' [[ Victoria Azarenka ]] ''' }} * | clase = "tabla-pegajosa-ninguno" | - | estilo = "color-de-fondo:#B9FF72;" | 2* ⫶|- | estilo = "text-align:left; color-de-fondo:#FFFFE0;" clase = "tabla-adhesiva-izquierda" | {{ sort | tabla. |{{ flagg | uxx | POL }} ''' [[ Tabla adhesiva ]] ''' }} * | clase = "tabla-adhesiva-ninguno" | - | estilo = "color-de-fondo:#B9FF72;" | 2* ⫶|} {{ fin de tabla fija }}
Nota: Los asteriscos (*) se utilizan porque los lectores de pantalla no pueden ver los colores de fondo de las celdas.
Nota: En el espacio de nombres de artículos, los enlaces en celdas de color están subrayados en negro. Ver:
Más estilos de plantillas para tablas: