Tabla con título fijo

[benitopro]

Hola a todos otra vez, he conseguido crear lo que tenía en mente (un calendario a medida), pero ahora necesito cambiar algún "detalle". Un detalle es mantener los meses fijos en el scroll vertical, pero que en el horizontal continúe como debe ser.

Lo que querría que se mantenga lo marrón (th), como aquí, he probado a poner la posición absoluta, pero me superpone todos los meses en uno... la cosa es que los meses tienen que ir dentro pero fuera... ¿se os ocurre algo? he usado como "guia" este ejemplo: http://www.cssplay.co.uk/menu/tablescroll el método 1. (La imagen de abajo es lo que tengo y cuando bajo el scroll desaparecen los marrones, en vez de quedarse)


El código que tengo es este:

JSP

Código HTML:

<div class="calendario">                 
    <div class="outer">
        <div class="innera">
            <table id="tablaResultadoCalendario">
        </table>
      </div>
    </div>
</div>
 

Código CSS:

.outer {position:relative;padding:4em 0 3em 0;height:550px;width:900px;}
.innera {overflow:scroll;width:900px;height:550px;}
 
.outer thead tr {top:1.5em;height:1.5em;left:0;}
 
.outer th, .outer td {width:78px;text-align:center;display: table-cell;vertical-align: inherit;}
.outer th {background:#724a10;color:#fff;}
 

Gracias de antemano y si no me he explicado bien me comentaís.
Saludos!!

[pzin]

¿No tendría que ser una posición fija y no absoluta para que se quede?

Código CSS:

position: fixed;
 

No he necesitado usar nunca esa técnica, así que por eso pregunto y no afirmo.

[benitopro]

Lo primero gracias por contestarme!!! Emm no, porqué si el div outer es fixed se me sale de la página... he probado a poner el th en fixed pero el resultado ha sido parecido a ponerlo en absolute:

[pzin]

Pero si pones el calendario con posición relativa, para que luego al ponerle a outer posición fija y no se salga del calendario, ¿no vale?

[benitopro]

Código CSS:

.calendario {position:relative;}
.outer {position:relative;padding:4em 0 3em 0;height:550px;width:900px;}
.innera {overflow:scroll;width:900px;height:550px;}
 
.outer thead tr {top:1.5em;height:1.5em;left:0;}
 
.outer th {position:fixed;width:78px;text-align:center;display: table-cell;vertical-align:inherit;}
.outer th {background:#724a10;color:#fff;}
 

¿Te refieres así? Si es eso... el resultado es parecido al anterior... es complicado porque solo puede moverse con el scroll horizontal del div...

[pzin]

¿Tienes algún ejemplo online para verlo in situ?

[C2am]

Hola
Tal vez este post del amigo Kseso? pueda ayudarte:
http://ksesocss.blogspot.com/2013/01...zado-fijo.html

Saludos

[benitopro]

Iniciado por pzin

¿Tienes algún ejemplo online para verlo in situ?

Por ahora no... ya que se trata del proyecto de fin de carrera.... veré si puedo hacer algo, si eso te comento. Gracias!!

Y gracias C2am per... ese es el enlace que me llevo al ejemplo que usé. La diferencia de mi tabla y esa es que la mía es más larga, y los th y los td no tienen el mismo tamaño, por lo que al poner atributos flotantes (absolute o fixed) se superponen o los th cambian de tamaño...