Tabla con cabecera fija

xinxan22 · #1 (**permalink**) 06/03/2014, 06:28

Buenos días,

tengo una tabla y estoy intentando hacer una cabecera fija, lo he conseguido de la siguiente manera pero el problema es el "height" y el scroll (pues tengo dos):

Código HTML:

<div style='position: fixed;'>
  <table>CABECERA</table>
</div>

<div style='height: 300px; position: relative; overflow: auto;'>
  <table>CONTENIDO</table>
</div>

Lo que me gustaría es que no fuera 300px sino que me llegara hasta el final de la página y que la cabecera se quedará fija dónde está.
Por otra parte tal como lo tengo hay el problema de los dos scrolls, el de la div y el de la página. Me gustaría poder moverme por la tabla con el scroll de la página.

NOTA: todo este fragmento de código va dentro del siguiente (es contenido dinámico cargado a partir de ajax):

Código HTML:

<head>
<style>
div.uno{
  position: relative;
  width: 100%;
}
div.dos{
  background-color: #ffffff; 
  margin: auto;
  width: 90%;
}
</style>
</head>
<body>

<div class="uno">

<div class="dos">contenido dinamico que se mostrara la tabla</div> 

</div>

</body>

Gracias,

saludos

Rafael · #2 (**permalink**) 06/03/2014, 10:07

De entrada no se hace lo que estás haciendo. Se usa la etiqueta caption y dentro de table no debes poner elementos vacíos.

Revisa esto:http://www.w3schools.com/tags/tryit....l_caption_test

Para dejar una cabecera fija tendrás que usar un position fixed: http://www.desarrolloweb.com/articul...nto-fixed.html

xinxan22 · #3 (**permalink**) 06/03/2014, 10:21

Hola,

me refiero hacer esto:

ejemplo

la tabla que tengo es:

Código HTML:

<table>
  <tr>
        <td>Nombre</td>
        <td>Apellidos</td>
   </tr>
</table>

<table>
  <tr>
        <td>Juan</td>
        <td>Gomez</td>
   </tr>
  <tr>
        <td>Pedro</td>
        <td>Gomez</td>
   </tr>
</table>

Saludos

pzin · #4 (**permalink**) 08/03/2014, 17:22

Pues... En principio deberías de cambiar la altura por un 100% y luego dársela también a estos dos elementos:

Código CSS:

Ver originalhtml, body {
  height: 100%;
}

xinxan22 · #5 (**permalink**) 10/03/2014, 13:01

Hola,

pero haciendo esto la página no tiene scroll y lo que me interesa es tener el scroll de la página y no de la div.

La página supera el 100% de height.

Saludos

pzin · #6 (**permalink**) 10/03/2014, 14:35

Pues no pongas el div, olvídate de [inline]overflow[/inlines]s y haz como dice Rafael; usa una posición fija y ya está.