Recientemente, cuando estaba haciendo estadísticas del proyecto, encontré un requisito específico, requiriendo que la tabla se solucione al desplazarse hacia arriba y hacia abajo; Al desplazarse a la izquierda y a la derecha, la tabla se fija en la primera columna de la tabla, se fija la última columna de la primera columna de la tabla.
Puede ser más claro poner las representaciones primero:
Al desplazarse a la izquierda y a la derecha, las dos columnas están fijas y la parte media de la cabeza y la cola se desplazan en consecuencia.
Al desplazarse hacia arriba y hacia abajo, la cabeza y la cola están fijas, y la parte media del primer y último se desplaza en consecuencia.
Ideas:Después de pensar durante mucho tiempo, descubrí que es básicamente difícil de lograr si simplemente uso una mesa, y hay lugares contradictorios al desplazarme hacia arriba y hacia abajo. Finalmente, cambié de opinión para usar el diseño de div e imitar el diseño de la mesa para lograr este efecto.
resolver: 1. Diseño general: dividido en tres partes: superior, media e inferior, a saber, encabezado, cuerpo y pie de página. El cuerpo es sólido. Implementar desplazamiento hacia arriba y hacia abajo. ¿No es muy simple? Ja ja. 2. Diseño del encabezado: dividido en el contenedor izquierdo a la derecha, izquierda 10% de ancho flotación izquierda, contenedor 80% de ancho flotación izquierda, derecha 10% de ancho flotación izquierda. Agregue un contenedor con el ancho real del contenedor de columna de datos (posicionamiento relativo).3. Cuerpo, pie de página y encabezado.
4. CORE DE CONTROL: Genere un DIV (80%) con el mismo ancho que el contenedor, y coloque un DIV con el mismo ancho de datos real que el contenedor de columna (como ID = Scroll). Para simular barras de desplazamiento izquierdo y derecho.
Código JavaScript Copiar contenido al portapapeles