Mantener fijo un elemento dentro de una capa con desplazamiento (scroll)

[Negora]

Hola chicos/as:

Tengo creado un diseño como el siguiente:



Consiste en una capa DIV con desplazamiento (overflow: auto), que contiene 2 tablas. Una que hace de cabecera y otra que contiene el listado en sí. Mi intención es que pese a que se realice un desplazamiento vertical en la capa, la tabla de la cabecera se siga viendo en esa posición, en la zona superior.

Esto lo he resuelto mediante JavaScript, controlando el evento de tipo "onScroll" en la capa. El problema es que dependiendo del navegador el resultado final diverge bastante. Mientras que Safari cumple a la perfección, el resto parece ejecutar la función con retraso, produciendo un efecto bastante antiestético.

Quisiera saber si empleando exclusivamente CSS se os ocurre algún modo de conseguir algo así, pero sin artificios extraños (por mi parte sigo experimentando con JavaScript para mejorar el asunto).

Si pudiese especificar la propiedad "position: fixed" a la tabla de cabecera sería estupendo, pero por desgracia esto implica un posicionamiento con respecto a todo el cuadro y quedaría fuera de la capa.

Muchas gracias.

[Null_]

para que la tabla del encabezado no se desplaze utiliza
position:absolute;left:x;top:x;

Suerte :D

[Negora]

Null_: Muchas gracias por responder pero, ¿A qué te refieres exactamente con los valores "x" de "left" y "top"?

[JavierB]

Hola Negora

Echa un vistazo a este mensaje:

http://www.imaputz.com/cssStuff/bigFourVersion.html

Saludos,

[Negora]

JaiverB: Muchas gracias Javier. El problema es que ése es el formato de tabla que empleaba yo para mis librerías AJAX antes de modificarlas e intentar implementar este otro.

Con ese sistema las columnas forzosamente se han de visualizar al completo y es necesario que el lugar donde la insertes disfrute de anchura suficiente. Es el que yo venía usando hasta ahora, sobretodo por estética, ya que jamás me gustaron las barras de scroll lateral para estos casos.

Sin embargo, con la llegada de nuevos proyectos más "bastos", me vi en la necesidad de sacrificar estética por utilidad, ya que era necesario insertar tablas de muchas columnas en espacios bastante más reducidos. Y de ahí que necesite a la fuerza un desplazamiento horizontal también. Por ello me vi avocado a buscar algo como lo que planteo.

También pensé en envolver ese tipo de tabla que comentas con una capa con scroll horizontal, pero por desgracia eso causaría que la barra de desplazamiento vertical no se visualizase hasta que se moviese la horizontal hasta el final.