Comunidad de diseño web y desarrollo en internet online

Tabla con header fijo y scroll (horizontal y vertical)

Citar            
MensajeEscrito el 13 Abr 2006 06:30 pm
Ok. Este es un problema un tanto complicado y desafiante (por lo menos para mi, que no tengo mucha experiencia con CSS).
Estoy tratando de generar una tabla con header fijo que tenga un scroll horizontal y otro vertical. Intente modificar las versiones de tampabay e imaputz pero sólo logré mi objetivo en Internet Explorer. En Firefox y Opera el header se mueve junto con el resto de la tabla cuando muevo los scrolls. Vean de qué estoy hablando aquí. El código se los voy a dejar al final de este mensaje.
La cosa es: ¿se le ocurre a alguien cómo modificar los estilos para lograr que el header quede fijo en IE y Firefox? Le voy a estar eternamente agradecido a ese "alguien".

BOFH - por motivos prácticos he quitado el código

Por ukeyoc

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Abr 2006 07:27 pm
Yo lo veo bien en firefox... Solo tienes que utilizar overflow: auto, como atributo de css, y listo.

Por Alan

470 de clabLevel

2 tutoriales

 

firefox
Citar            
MensajeEscrito el 13 Abr 2006 08:23 pm
Creo que no me explique bien alanorozco. Lo que yo quiero es que el encabezado (el que tiene los títulos: Comp., Fecha, etc) se quede fijo cuando yo hago scroll hacia abajo. Si ves la tabla en IE te vas a dar cuenta de que ahí se logra el efecto. En Firefox no sucede lo mismo. Todo baja y sube junto cuando uso el scroll.

Por ukeyoc

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Abr 2006 08:28 pm

ukeyoc escribió:

Creo que no me explique bien alanorozco. Lo que yo quiero es que el encabezado (el que tiene los títulos: Comp., Fecha, etc) se quede fijo cuando yo hago scroll hacia abajo. Si ves la tabla en IE te vas a dar cuenta de que ahí se logra el efecto. En Firefox no sucede lo mismo. Todo baja y sube junto cuando uso el scroll.
Primero, dime Alan :P...
Segundo: lo mejor que puedes hacer es una tabla (que Sí se haga scroll) dentro de otra tabla (que NO se haga scroll), donde pondrías el header. Así ahorras código y tiempo de carga ;)

Por Alan

470 de clabLevel

2 tutoriales

 

firefox
Citar            
MensajeEscrito el 13 Abr 2006 09:26 pm
Alan. Esa sería una buena alternativa... pero (porque siempre hay peros :)) el problema es que la tabla va a ser dinámica. Es decir, yo no sé los anchos de las celdas porque van a depender del texto que allí se coloque.
Por lo tanto tiene que ser una sóla tabla. Cosa que el ancho de toda la columna (incluyendo el pedazito de la columna que está incluida en el header) sea el mismo siempre.

Por ukeyoc

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Abr 2006 09:47 pm

ukeyoc escribió:

Alan. Esa sería una buena alternativa... pero (porque siempre hay peros :)) el problema es que la tabla va a ser dinámica. Es decir, yo no sé los anchos de las celdas porque van a depender del texto que allí se coloque.
Por lo tanto tiene que ser una sóla tabla. Cosa que el ancho de toda la columna (incluyendo el pedazito de la columna que está incluida en el header) sea el mismo siempre.
, entonces, ponle un atributo FIXED a la primera fila como posición... aunque no funcionaría en IE, aun así, no se descuadra ;)

Código :

table#me-gusta-mover-el bote {
overflow: auto;
height: 200px; /* cambia eso! */
}
tr#m-header td {
position: fixed
}

Código :

<table id="me-gusta-mover-el-bote">
<tr id="m-header"><td>blablabla</td><td>blablabla2</td></tr>
<tr><td>blablabla</td><td>blablabla2</td></tr>
<tr><td>blablabla</td><td>blablabla2</td></tr>
<tr><td>blablabla</td><td>blablabla2</td></tr>
<tr><td>blablabla</td><td>blablabla2</td></tr>
<tr><td>blablabla</td><td>blablabla2</td></tr>
<tr><td>blablabla</td><td>blablabla2</td></tr>
</table>

Saludos!

Por Alan

470 de clabLevel

2 tutoriales

 

firefox
Citar            
MensajeEscrito el 14 Abr 2006 03:40 am
:) En un momento intenté eso. Pero.... hay un pequeño detalle. Para que funcione una tabla con sroll horizontal y vertical el header debe mantenerse fijo verticalmente, pero moverse junto con el resto de la tabla horizontalmente. Ufff :P. Ello para que no se descuadre la tabla.
Eso complica bastante la situación.

Por ukeyoc

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Abr 2006 02:50 pm

ukeyoc escribió:

:) En un momento intenté eso. Pero.... hay un pequeño detalle. Para que funcione una tabla con sroll horizontal y vertical el header debe mantenerse fijo verticalmente, pero moverse junto con el resto de la tabla horizontalmente. Ufff :P. Ello para que no se descuadre la tabla.
Eso complica bastante la situación.
mmm, voy a intentar con la etiqueta tbody... Ya sé que soy muy terco, pero es para un código limpio y cumplir con los estándares ;)...

NOTA: Ya lo probé, en todos lados funciona perfecto, excepto en IE, que se descuadra todo, que problema!

Por Alan

470 de clabLevel

2 tutoriales

 

firefox
Citar            
MensajeEscrito el 14 Abr 2006 06:00 pm
Lo que tienes que hacer, es poner un ancho fijo a las celdas para poder usar tablas separadas, creo que seria la forma mas sana de resolver tu problema.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 14 Abr 2006 07:06 pm

ramm escribió:

Lo que tienes que hacer, es poner un ancho fijo a las celdas para poder usar tablas separadas, creo que seria la forma mas sana de resolver tu problema.

ukeyoc escribió:

Alan. Esa sería una buena alternativa... pero el problema es que la tabla va a ser dinámica. Es decir, yo no sé los anchos de las celdas porque van a depender del texto que allí se coloque.
Por lo tanto tiene que ser una sóla tabla.
Hay que ver los demás mensajes ;)

Por Alan

470 de clabLevel

2 tutoriales

 

firefox
Citar            
MensajeEscrito el 15 Abr 2006 04:26 pm
A esto lo veo muy tranquilo, ¿Acaso no puedes copiar y pegar? Luego solo es cuestión de modificar ciertos datos como los colores, y la información dentro de las celdas..

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 15 Abr 2006 08:59 pm
Hola al parecer lo que tienes que hacer es crear una tabla y agrupar los datos insertando las etiquetas <thead>, <tbody>, <tfoot>... , luego estas puedes dar un estilo...
Por ejemplo:

#styTabla{
width:100%;
}
#styTabla thead{
height:18px;
}
#styTabla tbody{
height:250px;
overflow:auto;
}
#styTabla tfoot{
height:18px;
}

Aunque no lo he probado (no tenia datos tabulados a la mano , ni tiempo ;)) ... parece que te puede servir .. .:D

Salu2

Por eporroa

664 de clabLevel



Genero:Masculino  

Lima - Peru

firefox
Citar            
MensajeEscrito el 15 Abr 2006 09:01 pm

alanorozco escribió:

ramm escribió:

Lo que tienes que hacer, es poner un ancho fijo a las celdas para poder usar tablas separadas, creo que seria la forma mas sana de resolver tu problema.

ukeyoc escribió:

Alan. Esa sería una buena alternativa... pero el problema es que la tabla va a ser dinámica. Es decir, yo no sé los anchos de las celdas porque van a depender del texto que allí se coloque.
Por lo tanto tiene que ser una sóla tabla.
Hay que ver los demás mensajes ;)


Vi ese mensaje, igualmente digo que deberias buscar la forma de poner ancho a las celdas.
Muchas veces he trabajado con tablas dinamicas y pongo anchos fijos, uno debe saber siempre el tipo de contenido que llevara cada celda, ademas las celdas deben crecer hacia abajo, no a los lados, asi que no le veo la dificultad.

Por otro lado, no poner anchos me hace pensar en una tabla bastante desordenada a la hora de mostrar los datos, nunca sabes como se comportaran.
Así que reitero, DEBERIAS buscar la forma de poner anchos

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 17 Abr 2006 03:46 am
ramm: No le puedo poner anchos porque las tablas que se van a generar van a contener cifras. Esas cifras pueden ser pequeñas o sumamente largas.
NEO_JP: No se trata de copiar y pegar. La tabla va a ser utilizada en un sitio que visitan muchos clientes. Cada uno tiene distintos datos. Es más, esos datos van cambiando en el mismo día. Otro dato: La misma "tabla tipo" se va a aplicar para generar diferentes tablas (es decir, que entregan distinto tipo de información).
Xroa©: Voy a probar tu idea y después te cuento. Gracias.

Por ukeyoc

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Abr 2006 03:57 am
mmmm
no me quiero imaginar el resultado de una tabla que cambie tanto.

Estas seguro que lo que necesitas es una tabla?


PD: la solucion de Xroa ya la probe y solo funciona en FF.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 17 Abr 2006 04:05 am
Xroa©: Tu propuesta funciona muy bien en Firefox, pero no en IE u Opera :P . Voy a ver si puedo hacer modificaciones para que se despliegue bien en esos dos navegadores.

Por ukeyoc

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Abr 2006 04:10 am
"no me quiero imaginar el resultado de una tabla que cambie tanto".

Jajajajaja... Tampoco hay que sobredimensionar las cosas. Los resultados con la tabla que mencione en un principio son bastante buenos. El único problema es que no se despliega correctamente en Firefox.

Por ukeyoc

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 18 Abr 2006 05:13 am
Por que no haces como en PHPmyAdmin, despues de X numero de filas repites el header??

Por Cep

BOFH

1509 de clabLevel

9 tutoriales

1 ejemplo

Genero:Masculino   REC Bastard Operators From Hell

Web Developer

firefox
Citar            
MensajeEscrito el 19 Abr 2006 02:43 am
Esa es justamente mi última opción. Si no encuentro el medio de crear una tabla con header fijo y scroll (actualmente estoy probando con javascript) voy a aplicarla. Claro, no es una opción fascinante :).

Por ukeyoc

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Abr 2006 02:52 am
Mira yo te ercomiendo esto, dejalo para internet exploiter asi como en el ejemplo, y para FF como phpMyAdmin.

Saludos ^^

Por Cep

BOFH

1509 de clabLevel

9 tutoriales

1 ejemplo

Genero:Masculino   REC Bastard Operators From Hell

Web Developer

firefox
Citar            
MensajeEscrito el 19 Abr 2006 06:14 am
Yo insisto en usar anchos fijos.

Ya vi la tabla y si se puede, solo tiene creo que 3 columnas con cifras que pueden variar mucho, que basta con ponerles un ancho suficiente para la cifra mas alta posible

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 19 Abr 2006 01:53 pm
ramm, la tabla prototipo va a ser utilizada para crear muchos tipos de tablas con diferentes tipos de información. Por lo tanto, el número de columnas y filas va a variar asi cómo el tipo de datos que van a incluir las columnas. ¿me entiendes ahora?
Por último, en el caso de la tabla del ejemplo, ni yo sé cuál puede ser la cifra más alta en el futuro para el "saldo". Hay clientes sumamente grandes.

Por ukeyoc

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Jun 2006 04:34 pm
ukeyoc, ahora entiendo tu problema, y es bastante complicado. Estoy justo pasando por lo mismo en un proyecto y recordé este post.

Me compliqué mucho con cada uno de esos ejemplos, demasiado. Intenté el metodo de tampabay, imaputz, 4 versiones modificadas de ellas por mi, y seguia sin funcionar exactamente lo que queria. Una tabla que funcione dinamicamente, y se auto-ajuste, etc, etc.

Asi que después de pasar un mal rato, volví a empezar y la idea vino a mi mente, y después de unos minutos de escribir código, y otros de pensar en cómo achicarlo salió esto.

Código :

<div class="table">
  <table>....</table>
</div>

div.table { width:737px; height:237px; margin:0 auto; }
div.table tbody { overflow-x:hidden; overflow-y:auto; width:737px; height:202px; }


Asi de sencillo, ni más ni menos, esto funcionará en los navegadores actuales, Firefox, Opera, Safari, y quizás IE7.
Pero IE6 tiene problemas, asi que...

Código :

div.table { width:721px; overflow-y:auto; }


No he investigado mucho, solo bajo mis propias deducciones pienso que la etiqueta tbody, asi como la etiqueta abbr es una etiqueta que no ha sido propiamente soportada en IE como tal (una etiqueta). Asi que el CSS no es reconocido y ni con un display:block; he podido hacer que muestre un borde (en los articulos decian que con esto bastaba para que funcione).

En fin, solo se acortan 16pixeles al ancho del div contenedor par que entre el scroll, y listo. El thead aún asi se sigue scrolleando, a esto se le conoce como "Gracefuly degradation", que a pesar de no funcionar como se quiere, siga funcionando y lo más importante el contenido se mantega visible y utilizable.

Veamos si te sirve y/o alguien se anima a hacer "algo mejor".
Estaba pensando en hacer algo con DOM para IE, pero no tengo mucho tiempo, en fin, lo intentaré luego. Saludos.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 14 Jun 2006 02:11 pm
¿podrías crear un ejemplo? No me funcionó muy bien. Quizás es porque utilizo xhtml o porque la tabla que ocupe para la prueba tiene un thead. Vaya a saber.

Por ukeyoc

8 de clabLevel



 

opera
Citar            
MensajeEscrito el 06 Ago 2008 03:57 pm

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 06 Ago 2008 05:32 pm
Inyaka miraste la fecha del post? :?

U_U

Por CarlosRuminott

1000 de clabLevel

6 tutoriales

 

Mdz, Arg

firefox
Citar            
MensajeEscrito el 07 Ago 2008 12:24 am
No falta el pesadito. Inyaka lo que vistes en jose.san-felipe.cl es una página de prueba que construí en los años 90. Es decir, hace muuuucho tiempo. Por eso lo de Netscape. Obviamente, el dominio lo utilizo sólo para hacer pruebas.
Pese al modo de la respuesta, agradezco el link y revisaré para ver si las tablas funcionan también con scroll horizontal (porque sólo les veo scroll vertical).

Por ukeyoc

8 de clabLevel



 

msie7
Citar            
MensajeEscrito el 07 Ago 2008 03:51 am
XD me sorprendí un poco al ver que habia un codigo tan, pero taaan atrasado , U_U si ese es el estilo de los 90 del cual todos renegamos

en fin la idea que saque de ahi fue muy simple

encierras toda la tabla en un div, al div contenedor le das overflow:auto , y tanto al thead como al tfoot le das position:absolute y lo pones de forma estática donde se te de la regalada gana, ojo que lo de darle overflow:auto al div es por que IE no admite que a una tabla se le de esta propiedad(si, a la mierda con IE )

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 08 Ago 2008 02:51 am
Veo que eres un buen tipo después de todo. Y sí, ese el modelo de lo que renegamos ahora. Una página realizada con tablas y cero uso de estilos. pero buueno... eran aquellos tiempos, cuando las tablas dominaban y de los CSS ni se sabia. Ah! Y, claro, IE reinaba sin competidores.
Voy a probar lo que me dices el fin de semana. Ahí te cuento.

Por ukeyoc

8 de clabLevel



 

msie7
Citar            
MensajeEscrito el 10 Ago 2008 09:40 pm
No, tiene el mismo problema de soluciones que vi anteriormente. Es decir, el thead está separado del tbody, por lo que estoy obligado a utilizar anchos fijos, lo cual no me sirve (porque yo genero dinamicamente las tablas, cuyos anchos cambian de acuerdo a la información contenida).
Ante eso en algun momento intenté ocupar de cabezera la primera fila de la tabla y dejarla fija, pero en este caso tenía otro problema. Funcionaba perfecto si sólo había scroll vertical, pero si a eso le añadía scroll horizontal (es decir, si añadía muchas columnas y sobrepasaba el ancho del div que hospedaba la tabla) quedaba la crema porque la primera fila se movia al mismo tiempo que movia el scroll horizontal. Porque, obvio, la fila queda fija ante movimientos verticales como horizontales.
En definitiva, y por lo mismo, hace rato abandoné la opción con CSS y derive a una opción con javascript.

Por ukeyoc

8 de clabLevel



 

opera

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.