Tabla con scrollbar

[xanful]

Buenas estoy intentando crear una tabla con un scrollbar en la que la cabecera sea fija y los datos sean los que bajen manteniendose la cabecera siempre visible.

He intentado hacerlo con 2 tablas en las que una de ellas tiene la cabecera y la otra los datos con el scrollbar, pero al aparecer el scrollbar me descuadra por completo la tabla y no se como hacer para cuadrarla perfectamente, porque ademas al redimensionar los datos se descuadran aun mas.

Alguien sabe como hacer para que esos datos cuadren perfectamente estando en 2 tablas distintas?

El style es

Código:

<style type='text/css'>@import "/et/estilos/et_estilos.css";
   .TableScroll {
        position: relative;
        height: 500px;
        overflow: auto;
      }

 <link rel='stylesheet' href='/et/estilos/et_estilos.css'>
 </style>

Y las tablas estan organizadas asi

Código:

<table width='100%' border='1'>
      <tr align='center'> 
	
        <td width='5%' class='azulPequenaTablaNegrita'>&nbsp;&nbsp;</td>
        <td width='30%' class="azulPequenaTablaNegrita"> USUARIO &nbsp;&nbsp;&nbsp;<a style='cursor:hand;' onclick="Ordenar('A');" class="letraMenus"> <img name='agrupacion1' src="/et/imagenes/d.gif" width="10" height="10">Ordenar</a>
			</td>
        <td width='5%' class='azulPequenaTablaNegrita'>1</td>
        <td width='5%' class='azulPequenaTablaNegrita'>2</td>
        <td width='5%' class='azulPequenaTablaNegrita'>3</td>
        <td width='5%' class='azulPequenaTablaNegrita'>4</td>
        <td width='5%' class='azulPequenaTablaNegrita'>5</td>
        <td width='5%' class='azulPequenaTablaNegrita'>6</td>
        <td width='5%' class='azulPequenaTablaNegrita'>7</td>
        <td width='5%' class='azulPequenaTablaNegrita'>8</td>
        <td width='5%' class='azulPequenaTablaNegrita'>9</td>
        <td width='5%' class='azulPequenaTablaNegrita'>10</td>
		            <td width='1%' class='prueba'> &nbsp;&nbsp&nbsp</td>
		   

      </tr>
		<input type='hidden' name = 'NusuarioCol' value ='1'>
		  </table>
		  <div class="TableScroll">
		 <table width='100%' border='1' align='left'>
      <tr> 
        <td width='5%' align='center' class='azulPequenaTabla'> 
	   	<input type='checkbox' name='codpepe1' value='pepe1'>
        </td>
        <td width='30%'  align='center' class='azulPequenaTabla'> 
	   	pepe1
        </td>
        <td  width='5%' align='center' class='azulPequenaTabla'> 
            <input class='azulPequenaTabla' type="text" name="text1pepe1" value="-1" size='3' maxlength='3' disabled>
        </td>
        <td  width='5%' align='center' class='azulPequenaTabla'> 
            <input class='azulPequenaTabla' type="text" name="text2pepe1" value="-1" size='3' maxlength='3' disabled>
        </td>
        <td  width='5%' align='center' class='azulPequenaTabla'> 
            <input class='azulPequenaTabla' type="text" name="text3pepe1" value="-1" size='3' maxlength='3' disabled>
        </td>
        <td  width='5%' align='center' class='azulPequenaTabla'> 
            <input class='azulPequenaTabla' type="text" name="text4pepe1" value="-1" size='3' maxlength='3' disabled>
        </td>
        <td  width='5%' align='center' class='azulPequenaTabla'> 
            <input class='azulPequenaTabla' type="text" name="text5pepe1" value="-1" size='3' maxlength='3' disabled>
        </td>
        <td  width='5%' align='center' class='azulPequenaTabla'> 
            <input class='azulPequenaTabla' type="text" name="text6pepe1" value="-1" size='3' maxlength='3' disabled>
        </td>
        <td  width='5%' align='center' class='azulPequenaTabla'> 
            <input class='azulPequenaTabla' type="text" name="text7pepe1" value="-1" size='3' maxlength='3' disabled>
        </td>
        <td  width='5%' align='center' class='azulPequenaTabla'> 
            <input class='azulPequenaTabla' type="text" name="text8pepe1" value="-1" size='3' maxlength='3' disabled>
        </td>
        <td  width='5%' align='center' class='azulPequenaTabla'> 
            <input class='azulPequenaTablaNegrita' type="text" name="text9pepe1" value="3" size='3' maxlength='3' disabled>
        </td>
        <td width='5%'  align='center' class='azulPequenaTabla'> 
            <input class='azulPequenaTabla' type="text" name="text10pepe1" value="-1" size='3' maxlength='3' disabled>
        </td>
      
      </tr>
   </table>
	 </div>

Un saludo y muchas gracias por adelantado

[walvaRo]

No tenía ni idea de que a las tablas también se les pudiese colocar barras de scroll....

[xanful]

Bueno en verdad no es la tabla la que tiene scrollbar, es el div....

[Daniel Ulczyk]

Lo que en definitiva dice el código es que la tabla está contenida dentro de un <div>, lo que hace es que en cuanto se vulnere las dimensiones declaradas genere un scroll.

[posavasos]

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

[walvaRo]

Osea, una capa conu una tabla dentro y con Scrolll la capa... Pues vaya... ¿no es mejor usar iframe en este caso?

[Wako]

Pues me parece que primero estas trabajando de mas al ponerle un class separado a cada celda class='azulPequenaTablaNegrita' o dentro del mismo y el otro que usas cuando podrias declararlo como un div que envuelva a toda la tabla y asi no tienes que declararlo cada vez.

El codigo que puso posavasos funciona bien asi que aprovechalo

Saludos

[xanful]

Buenas, si asi me funciona perfectamente pero quisiera saber si de alguna forma es posible hacerlo con un ancho en porcentajes en vez de fijo...

[furoya]

Hola todos :

xanful : hace un tiempo hice algo con JS que lee el ancho de cada columna y se lo pasa a la tabla de 'arriba', pero es para IE, no sé cómo adaptarlo a otros navegadores

scroll complicado

saludos

furoya