PDA

Ver la Versión Completa : fijar cabecera para tablas definidas en %


Paco
24-11-2005, 14:19:25
Buenos días a todos,

mi problema es el siguiente. tengo definida una tabla medinate dos div, uno para la cabecera, que permanece inmovil y otra para los datos que se obtienen de una B.D. Los tamaños de celdas estan definidos con % y esto tiene que ser asi no puedo definirlo con px. El problema es que si los datos que coloco en el div de abajo son muchos aparece el scroll descuadrando las columnas del primer div con las del segundo. Se que si se hace con px puedo volver a cuadrar las columnas quitando un numero determinado de px a la columna que esta pegada al scroll pero como hecerlo con porcentajes.

Aver si me podeis dar una ayudita

kayetano
24-11-2005, 15:26:36
Hola

Podrías indicar una página o poner una porción del código (no te pases) para tener un poco mas claro tu ejemplo, he intentado realizar una prueba pero no termina de cuadrarme lo que tu me dices.

Paco
24-11-2005, 16:55:55
Hola, aqui tienes una de las tablas con la que tengo este problema. Puedes probar sustituyendo los datos que devuelve el DTO por otros que metas tu hasta que desbordes el height de 186 y veras que cuando aparece el scroll la cabecera y la tabla de datos se descuandran.



<div id="Layer1" style="width:95%;">
<table width="100%" border="1" cellpadding="0" cellspacing="0"
bordercolordark="#FFFFFF" bordercolorlight="#CCCCCC" >
<tr>
<td class="text2" width="10%" align="center">Fecha Cita</td>
<td class="text2" width="10%" align="center">Hora Cita</td>
<td class="text2" width="10%" align="center">Asiste</td>
<td class="text2" width="20%" align="center">Nombre Expediente</td>
<td class="text2" width="15%" align="center">Fecha Apertura</td>
<td class="text2" width="15%" align="center">Fecha Cierre</td>
<td class="text2" width="20%" align="center">Profesional</td>
</tr>

</table>
</div>


<div id="Layer2" style="width:95%; height:186; z-index:1; overflow-y:auto">


<table width="100%" border="1" cellpadding="0" cellspacing="0"
bordercolordark="#FFFFFF" bordercolorlight="#CCCCCC" >
<logcresent name="citasForm" property="colCitas">
<logc:iterate id="colCitas" name="citasForm" property="colCitas" indexId="ctr">
<bean:define id="cita" name="colCitas" type="...dto.DTOCitas"/>
<tr>

<td class="text3" width="10%" align="center">
<bean:write name="colCitas" property="f_cit_fecha"/>&nbsp;</td>
<td class="text3" width="10%" align="center">
<bean:write name="colCitas" property="t_cit_hora"/>&nbsp;</td>
<td class="text3" width="10%" align="center">
<input type="checkbox" id="sel" <%= checked %> <%= disabled %> value="<%= cita.getC_cit_id() %>"
onclick="llenoValores(this.value);">
</td>
<td class="text3" width="20%" align="center">
<bean:write name="colCitas" property="t_exp_nombre"/>&nbsp;</td>
<td class="text3" width="15%" align="center">
<bean:write name="colCitas" property="f_exp_inicio"/>&nbsp;</td>
<td class="text3" width="15%" align="center">
<bean:write name="colCitas" property="f_exp_final"/>&nbsp;</td>
<td class="text3" width="20%" align="center">
<bean:write name="colCitas" property="nombreProfesional"/>&nbsp;</td>
</tr>
</logc:iterate>
</logcresent>
</table>


</div>

kayetano
24-11-2005, 17:11:19
Hola

ok, ya tengo claro y probado el problema, que yo sepa no hay solución con el método que tu estas usando. Mi pregunta es ¿por que no utilizas una sola tabla para la cabecera y el contenido?

PD. No terminaba de entender lo de la barra de Scroll, y despúes de ver tu ejemplo he podido comproba que en FireFox (pero solo en este navegador) aparece una barra de scroll.

Paco
24-11-2005, 17:46:00
gracias por responder,

Lo de las dos tablas es para hacer que la cabecera no me desaparezca al mover el scroll hacia abajo, es decir una tabla esta fija y representa la cabecera y la otra se mueve con el scroll y representa los datos. si pones el overflow-y a hidden o bien tienes menos de 186 px de datos en la tabla inferior veras que las columnas de la cabecera se corresponden con las columnas de los datos, en cambio cuando superas esos 186 px de datos y tienes el overflow-y a auto aparece un scroll en la tabla inferior que descuadra las columnas. Mi problema es como mantener cuadradas las columnas sin dejar de utilizar los %

un saludo

kayetano
24-11-2005, 18:05:12
Hola

La verdad es que no se me ocurre nada. Igual con JavaScript puedes hacer algo, pero le tienes crudo. Piensa que entre las dos tablas no existe ninguna relación por lo tanto cada una de ellas se comporta de diferente forma.

Siento no poder ayudarte.

Paco
24-11-2005, 18:36:05
Gracias de todas formas

un saludo

roman
24-11-2005, 22:55:59
Hablo un poco en el aire ya que no sé si funcione. ¿Qué pasa si defines tu tabla así:



<table>
<thead>
<tr><td></td><td></td></tr>
</thead>
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>


y pones el overflow a la etiqueta <tbody>?

Creo recordar que esto funciona en un navegador y no en otro. Habría que probar.

// Saludos

Paco
25-11-2005, 13:51:37
Hola Roman, gracias por tu ayuda, pero no soy capaz de colocar el scroll en el tboby, el código que escribo es el siguiente:



<table border="1">
<thead>
<tr><td>hola</td><td>adios</td></tr>
</thead>
<tbody id="datos" style="height:10px; top:40px; overflow-y:auto;">
<tr><td>a</td><td>s</td></tr>
<tr><td>d</td><td>f</td></tr>
<tr><td>a</td><td>f</td></tr>
<tr><td>f</td><td>f</td></tr>
<tr><td>a</td><td>s</td></tr>
<tr><td>d</td><td>f</td></tr>
<tr><td>a</td><td>f</td></tr>
<tr><td>f</td><td>f</td></tr>
<tr><td>a</td><td>s</td></tr>
<tr><td>d</td><td>f</td></tr>
<tr><td>a</td><td>f</td></tr>
<tr><td>f</td><td>f</td></tr>
<tr><td>a</td><td>s</td></tr>
<tr><td>d</td><td>f</td></tr>
<tr><td>a</td><td>f</td></tr>
<tr><td>f</td><td>f</td></tr>
</tbody>
</table>

creo que voy a tener que utilizar javascrit para solucionar mi problema,
un Saludo.