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'> </td>
<td width='30%' class="azulPequenaTablaNegrita"> USUARIO <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'>   </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