Div que se situa encima de otro

[marodal]

Hola a todos,

Quiero poner en mi pagina 2 contenedores, uno que tenga la cabecera de una tabla, y otro con las filas de mi tabla, y que permita scrollbar. El codigo , simplificado, es el siguiente:

Código:

<div id="cabecera">
   <table></table>
</div>

<div id="cuerpo">
    <table></table>
</div>

 #cabecera{
  position:absolute;
  width: 100%;
  border-style:solid;
  border-width:1px;
  overflow: hidden;
}

#cuerpo{
 float:center;
	left: 0%; 
	height:80%;
	width: 100%; 
	overflow: auto;
	background-color:#fff;
}

El problema que tengo es que el contenedor cuerpo se pone encima de la cabecera, y esta no se ve. Si uso posicionamiento absoluto con porcentajes para posicionarlos, cuando voy disminuyendo la ventana las letras de la cabecera se ocultan por debajo del contenedor cabecera, y no es un efecto deseado.

¿Como puedo arreglarlo?

Gracias y un saludo

[Verkia]

El problema esta en el uso del position:absolute te recomiendo que quites los divs y uses solo tablas, puedes poner la propiedad colspan a la primera fila para convertirla en una "cabecera".

Te dejo aquí más info:
http://www.htmlquick.com/es/tutorials/tables.html

[marodal]

Al final lo he solucionado usando posicionamiento absoluto y colocando el segundo div en la posición que quiero de forma que deje mostrar la cabecera.

Ahora tengo el siguiente problema:

Estoy programando en jsp, y la tabla algunas veces contendrá 2 elementos, y otras muchos mas elementos, de forma que no cabrán en el contenedor y me aparecerá una barra de desplazamiento (es lo que quiero). Pero cuando aparece, la barra de scroll para moverme por los elementos de mi tabla, la barra entra dentro del div, de forma que el tamaño de las celdas de mi tabla se modifican y ya no equivale al tamaño de las celdas de la cabecera.

¿Sabeis como podría solucionarlo?

Un saludo