Foros del Web » Creando para Internet » HTML »

Tabla con scrollbar

Estas en el tema de Tabla con scrollbar en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/02/2005, 06:02
 
Fecha de Ingreso: diciembre-2003
Ubicación: Madrid
Mensajes: 80
Antigüedad: 14 años
Puntos: 0
Tabla con scrollbar

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
  #2 (permalink)  
Antiguo 25/02/2005, 07:15
 
Fecha de Ingreso: febrero-2004
Mensajes: 446
Antigüedad: 13 años, 10 meses
Puntos: 0
No tenía ni idea de que a las tablas también se les pudiese colocar barras de scroll....
  #3 (permalink)  
Antiguo 25/02/2005, 07:22
 
Fecha de Ingreso: diciembre-2003
Ubicación: Madrid
Mensajes: 80
Antigüedad: 14 años
Puntos: 0
Bueno en verdad no es la tabla la que tiene scrollbar, es el div....
  #4 (permalink)  
Antiguo 25/02/2005, 07:31
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
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.
  #5 (permalink)  
Antiguo 25/02/2005, 08:18
 
Fecha de Ingreso: enero-2005
Mensajes: 265
Antigüedad: 12 años, 11 meses
Puntos: 1
http://www.imaputz.com/cssStuff/bigFourVersion.html
  #6 (permalink)  
Antiguo 26/02/2005, 09:46
 
Fecha de Ingreso: febrero-2004
Mensajes: 446
Antigüedad: 13 años, 10 meses
Puntos: 0
Osea, una capa conu una tabla dentro y con Scrolll la capa... Pues vaya... ¿no es mejor usar iframe en este caso?
  #7 (permalink)  
Antiguo 26/02/2005, 11:42
 
Fecha de Ingreso: enero-2005
Ubicación: Chile
Mensajes: 162
Antigüedad: 12 años, 10 meses
Puntos: 0
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
  #8 (permalink)  
Antiguo 27/02/2005, 16:19
 
Fecha de Ingreso: diciembre-2003
Ubicación: Madrid
Mensajes: 80
Antigüedad: 14 años
Puntos: 0
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...
  #9 (permalink)  
Antiguo 01/03/2005, 12:19
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:31.