¿Cómo se duplica la funcionalidad de "congelar panel" en una tabla HTML?

Question

Tengo un widget en un proyecto ASP.NET que estoy desarrollando para mi trabajo. Tiene que tener 300 píxeles de ancho y no puede ser más ancho. Desafortunadamente, lo que quieren ha resultado ser bastante complicado para un widget tan pequeño. Aquí es lo que tengo en este momento:

http://www.codetunnel.com/content/images/widget/currentWidget.jpg

Como se puede ver, este es un control de acordeón jQuery UI. A medida que cada panel de acordeón se expande, se realiza una llamada ajax para cargar sus contenidos de forma asincrónica. En este momento escupe una tabla HTML que contiene los datos deseados. La tabla está dentro de un DIV con el estilo overflow: auto; para que tengamos barras de desplazamiento en la parte inferior y en la derecha.

Mi problema es que quiero algunas funciones bastante personalizadas (como la capacidad del panel de congelación en excel). Al desplazarme hacia la izquierda y hacia la derecha, quiero que todas las filas, incluido el encabezado, se desplacen hacia la izquierda y hacia la derecha excepto para la columna de la izquierda, "nombre del producto". De esta manera:

http://www.codetunnel.com/content/images/widget/scrollRight.jpg

Al desplazarse hacia arriba y abajo quiero todas las columnas, incluyendo la columna de la izquierda, para desplazarse hacia arriba y hacia abajo excepto para la fila de encabezado. De esta manera:

http://www.codetunnel.com/content/images/widget/scrollDown.jpg

¿Cuál es la mejor manera de conseguir esta funcionalidad? ¿O hay alguna manera?

Answer 1

Construí algo similar, pero mucho menos complejo: quería que la primera fila de la tabla (los encabezados) se congelara mientras las filas de datos se desplazaban verticalmente. Lo implementé como 2 tablas diferentes, cada una con celdas de ancho fijo, cada una en su propia DIV. El div "header" simplemente se sentó estático, y el div "body" usó overflow: auto para desplazarse.

Su problema es más complejo, porque quiere "congelar paneles" en ambos ejes, y soporte de desplazamiento en ambos ejes (tenía mucho más espacio con el que trabajar, y no tenía que dar cuenta del desplazamiento horizontal en absoluto). Sin embargo, me pregunto si usted podría comenzar desde esa posición y trabajar desde allí ...

Definir 4 divs:

• NW: éste no se desplaza en absoluto, nunca. Es la celda de "nombre del producto" en su ejemplo
• NE: esta se desplaza horizontalmente solamente. Es la fila superior/encabezado en su ejemplo
• SW: esta se desplaza verticalmente solamente. Es la columna del lado izquierdo en su ejemplo
• SE: esta se desplaza en ambas direcciones. Es la cuadrícula de datos principal en su ejemplo

Con 4 DIV, tendría que lidiar con 4 tablas distintas, por lo que deberemos mantener el ancho de sus celdas y alturas de celdas sincronizados. Idealmente, podríamos hacer esto en tiempo de renderizado, si podemos convertirlos en valores fijos. De lo contrario, podríamos escribir algunos jquery/JS del lado del cliente para iterar las celdas en la tabla SE cuando la página se carga por primera vez (o se redimensiona), y forzar el tamaño de las otras tablas para que coincidan.

Con 4 DIVs, también necesitamos sincronizar el desplazamiento: cuando SE se desplaza horizontalmente, NE debe desplazarse a la misma posición. Cuando SE se desplaza verticalmente, SW debe desplazarse a la misma posición. Sospecho que debe haber algunos eventos de desplazamiento del lado del cliente que podamos enganchar, para detectar cuándo SE se desplaza.Dentro de esos eventos, deberíamos poder forzar NE y/o SW para que se desplacen de la misma manera.

Disculpa, esta es una respuesta tan vaga/abstracta. Lo esencial de implementar algo como esto tomará más tiempo de lo que podría robar cómodamente de mi trabajo principal. Pero esto es algo que ha estado vibrando en mi cerebro, así que pensé que lo compartiría contigo. Espero que te acerque un poco más a una solución. ¡Aclamaciones!

Answer 2

¿Es esto algo que tbody puede resolver dentro de una tabla de tamaño fijo? Parece que podría poner overflow:auto en el tbody.