Tabla HTML desplazable con la fila superior y la columna izquierda congeladas

¿Alguien ha podido implementar una tabla desplazable en HTML donde las columnas SUPERIOR e IZQUIERDA están congeladas, pero el resto de la tabla es desplazable? Un ejemplo perfecto de esto es: Google Squared Tabla HTML desplazable con la fila superior y la columna izquierda congeladas

Intenté realizar ingeniería inversa en el código de la tabla de google squared, pero hasta ahora no he tenido éxito.

Nota: Necesito la capacidad de CONGELAR la FILA IZQUIERDA y la COLUMNA IZQUIERDA al mismo tiempo.

Fuente

2009-07-08 Jon

El enlace está roto. ¿Puede proporcionar uno nuevo, porque tengo mucha curiosidad sobre cuál es el valor práctico de dicha tabla? –

Hay un ejemplo de trabajo en http://ajaxian.com/archives/freeze-pane-functionality que debería ser fácil de duplicar. Asegúrese de anotar los comentarios: muchos de los usuarios han hecho sugerencias útiles para mejorar el guión.

Solicitud de Per @ Nirk, un enlace directo a la demostración activa está en http://www.disconova.com/open_source/files/freezepanes.htm.

Fuente

2009-07-08 23:06:07 anschauung

¿Alguien ha encontrado una mejor manera de hacer esto? Estoy trabajando con algunos conjuntos de datos ENORMES y por lo tanto las tablas contienen una gran cantidad de datos, la clonación de datos de hasta 4 veces simplemente no va a funcionar. ¿Tiene jQuery algún método para lograr este mismo fin? –

Me vinculé al artículo intencionalmente - los comentarios proporcionaron muchas mejoras útiles que el póster debería considerar, IMO. – anschauung

-1

Si usa jQuery hay muchos complementos para tablas con cabezal fijo.

Fuente

2009-07-08 22:25:09 usoban

Ir con una estructura básica así-

table 
    row 
    column (blank) 
    column 
     table (1 row high, column headers) 
    row 
    column 
     table (1 column wide, row headers) 
    column 
     div (fixed height & width, overflow auto) 
     table (actual data)

Establecer una mesa de diseño fijo y especificar los anchos de columna en píxeles de forma explícita. Deberías poder lograr el mismo efecto.

Fuente

2009-07-08 22:39:48

¿Qué sucede si desea permitir que el contenido de la celda determine las dimensiones de la celda (es decir, utilice el diseño de tabla predeterminado)? – allyourcode

-1

Usted necesita Scrollable (plugin de jQuery)

Demo is here

Fuente

2009-07-08 22:57:01 Thinker

demo se rompió en mi navegador (cromo) – tfwright

tengo una versión de esto en uso (para una pantalla de estilo Gantt-chart).

utiliza 3 tablas: 1 para la columna de la izquierda (las filas), 1 para la parte superior (columnas) y luego los datos.

necesita trabajar duro para que las celdas coincidan con los tamaños que coinciden con ( table layout-fixed pueden ayudar a lograr esto).

Las tablas se colocan en algunos divs; los divs izquierdo y superior tienen (como se sugirió anteriormente) altura & ancho y overflow-auto en sus CSS.

A continuación, conseguir algunos javascript para sincronizar el desplazamiento de la parte superior izquierda divs/con la interior ...

Por lo que recuerdo que había un poco de 'maldición y vuelve a intentar', pero se puede hacer con un mínimo de js.

hth

Fuente

2009-08-22 09:07:48 realcals

Tabla HTML desplazable con la fila superior y la columna izquierda congeladas

Respuesta

Cuestiones relacionadas