scroll vertical y horizontal en tabla

[jessifb88]

Hola a todos!
Mi problema es que tengo una tabla en html muy grande y necesito fijarle un tamaño, poder desplazarme por ella con scroll vertical y horizontal de manera que la primera fila y la primera columna se queden fijas, pero que cuando mueva la barra de scroll horizontal se muevan junto con el contenido las cabeceras de las columnas (quedando la primera columna inmóvil) y que cuando mueva la barra de scroll vertical se mueva todo el contenido de la tabla (menos la cabecera).
Espero haberme explicado bien. Mi tabla es un cuadrante de vacaciones en el que en la cabecera hay días de meses y en la primera columna nombres de personas. La tabla muestra en qué fecha se han cogido las vacaciones las personas. Lo que se pretende es que cuando se estén viendo los datos en la tabla podamos saber en todo momento qué mes y qué persona estamos mirando.
Agradeceré todas las sugerencias, tanto código que me podais proporcionar como links de páginas que muestren ejemplos semejantes.
Gracias!

[hades87]

Mírate la propiedad e CSS overflow, que creo que te podrá ayudar bastante, de todas formas no acabo de ver muy claro que es lo que quieres.

[jessifb88]

Gracias por tu sugerencia aunque ya soy consciente de la propiedad overflow. Lo que necesito es que la primera columna de mi tabla no se pierda cuando me desplace horizontalmente por la tabla. Según vaya haciendo el scroll horizontal que la primera columna siempre esté visible. Y según haga el scroll vertical sea la primera fila la que no se mueva. Aunque tengo metido el overflow con una altura fija cuando mi tabla es muy grande y me salen las barras de scroll yo muevo la de scroll vertical y dejo de ver la cabecera, y del mismo modo la del scroll horizontal y dejo de ver la primera columna. Quiero que eso no ocurra, quiero sequir viéndo siempre parte de la cabecera y parte de la primera columna según dónde me haya posicionado con el scroll.

[kseso?]

Por la vía de css:

Código css:

#contiene_tablas {
   width:750px;
   height: 500px;
   overflow: auto;
}
.encabezado {
   position: fixed;
   /* la anchura tiene que ser menor que "contiene_tablas" */
}
.datos {
   /*define las propiedades que necesites*/}
 

adapta las medidas al tamaño que necesites para mostrar los datos.

Y en el html

Código html:

<div id="contiene_tablas">
    <div class="encabezado">
        <!-- aquí coloca la tabla con los datos que quieres siempre visibles -->
    </div>
    <div class="datos">
         <!-- aquí la tabla con los datos que se "desplazarán -->
    </div>
</div>
 

Lo anterior no es válido para ie6. Si necesitas compatibilidad con él, Mikmoro tiene en su página: www.araudi.net la estructura que necesitarías.

Un saludo