Foros Club Delphi

Foros Club Delphi (https://www.clubdelphi.com/foros/index.php)
-   HTML, Javascript y otros (https://www.clubdelphi.com/foros/forumdisplay.php?f=38)
-   -   HTML scrollbar en una tabla (https://www.clubdelphi.com/foros/showthread.php?t=45411)

papulo 02-07-2007 18:37:04

HTML scrollbar en una tabla
 
Estoy investigando como hacer que aparezca una barra de desplazamiento en una tabla, dentro de una página HTML.

Creo que tiene que ver con el siguiente atributo (marcado en negrita) en las CSS:

Código:

/* define height and width of scrollable area. Add 16px to width for scrollbar          */
div.tableContainer {
        clear: both;
        border: 1px solid #963;
        height: 285px;
        overflow: auto;
        width: 756px


¿Es correcto?

Saludos gente.

dec 02-07-2007 18:43:03

Hola,

Creo que vas bien, pero (si no te funciona como esperas), prueba a incluir la tabla dentro de un contenedor (DIV) y aplica el estilo correspondiente a este último. :)

roman 02-07-2007 18:43:24

Pues yo diría que sí es correcto, suponiendo que tableContainer es un div que contiene a la tabla. Pero, si lo preguntas, ¿es por qué no te funciona?

// Saludos

roman 02-07-2007 18:44:40

Cita:

Empezado por dec
incluir la tabla dentro de un contenedor (DIV)

Juraría que esto es lo que está haciendo:

Código:

div.tableContainer
{
  ...
}

// Saludos

dec 02-07-2007 18:47:06

Hola,

Como diría Homer... :D :D


papulo 02-07-2007 18:51:01

En realidad estaba buscando la información sobre el tema, todavía no lo he probado con nada, y al usar la búsqueda avanzada tampoco ha salido nada.

En el google he encontrado esto y quería asegurarme, solo eso ;)

Gracias por las respuestas, ahora ya se que es lo que buscaba.

Saludos.

roman 02-07-2007 19:00:23

Lo interesante aquí (creo que alguna vez lo habíamos comentado) es como hacer que se desplacen las filas quedando fijos los encabezados. Lo lógico sería poner la propiedad overflow en el tbody de la tabla, pero- si no mal recuerdo, sólo funciona con IE.

// Saludos

D-MO 03-07-2007 06:39:09

Jaja, se han ganado un 10 todos, desconocía por completo este atributo, desde hoy dejo de matarme con los iframes.

Saludos.

PD:
No tienen algo más por ahi que me pueda servir?

papulo 03-07-2007 09:09:56

Cita:

Empezado por roman
Lo interesante aquí (creo que alguna vez lo habíamos comentado) es como hacer que se desplacen las filas quedando fijos los encabezados. Lo lógico sería poner la propiedad overflow en el tbody de la tabla, pero- si no mal recuerdo, sólo funciona con IE.

Yo ya había pensado en hacerlo delo modo artesanal, una tabla de una fila y la otra tabla inmediatamente debajo. Así tenemos el encabezado fijo y compatible con cualquier navegador, jejeje y no le veo pega alguna ¿no?.

Saludos.

roman 03-07-2007 16:48:08

Cita:

Empezado por papulo
y no le veo pega alguna ¿no?

Quizá no. Pero no me queda claro si podrás ajustar bien las columnas para que las del encabezado coincidan siempre con las del resto. Creo que, dependiendo del navegador, la barra de desplazamiento vertical aparece dentro o fuera de lo que sería la caja original. Eso puede hacer que la columna de la derecha se achique o no. Y si tienes algunos anchos en porcentajes, podría alterarse el ancho de todas las columnas cuando aparezca la barra. Claro que podrías forzar al overflow a que siempre muestre la barra aun cuando no sea necesaria, pero no se ve muy bonito.

Por otra parte, me parece que una tabla partida en dos, rompe con los estándares de usabilidad. Un lector de páginas, por ejemplo, no sabría que ambas tablas están relacionadas.

// Saludos

papulo 03-07-2007 17:04:40

Cita:

Empezado por roman
Quizá no. Pero no me queda claro si podrás ajustar bien las columnas para que las del encabezado coincidan siempre con las del resto. Creo que, dependiendo del navegador, la barra de desplazamiento vertical aparece dentro o fuera de lo que sería la caja original. Eso puede hacer que la columna de la derecha se achique o no. Y si tienes algunos anchos en porcentajes, podría alterarse el ancho de todas las columnas cuando aparezca la barra. Claro que podrías forzar al overflow a que siempre muestre la barra aun cuando no sea necesaria, pero no se ve muy bonito.

Por otra parte, me parece que una tabla partida en dos, rompe con los estándares de usabilidad. Un lector de páginas, por ejemplo, no sabría que ambas tablas están relacionadas.

// Saludos

Visto así, tienes toda la razón del mundo.

Por suerte es para un proyexto propio, usará todo quisqui el navegador que diga (firefox) y no tendré que preocuparme (en este caso) por los temas de usabilidad, pero tomo nota de tu anotación para aplicaciones futuras.

Ahora bien ¿como lo resolverías tu elegantemente?

Un saludo.

roman 03-07-2007 17:10:08

Cita:

Empezado por papulo
Ahora bien ¿como lo resolverías tu elegantemente?

Hombre, pues ni idea. Si la tuviera ya la habría puesto :) Pero ya entrados en gastos, podríamos olvidarnos de la barra y hacer una paginación "normal", pero usando ajax para cargar las distintas páginas.

// Saludos

papulo 03-07-2007 17:42:50

Puuueeees no se me había ocurrido, tan acostumbrado a hacer las aplicaciones con DELPHI, no había pensado en paginar.

Veré como queda y si me sastisface (y el jefe, que suele ser un tio cabal lo autoriza), lo usaré de ahora en adelante.

Thanks Roman.

roman 03-07-2007 17:46:30

Cita:

Empezado por papulo
Veré como queda y si me sastisface (y el jefe, que suele ser un tio cabal lo autoriza), lo usaré de ahora en adelante.

Y no olvides colocarlo aquí para que todos podamos reusarlo :D

// Saludos

papulo 03-07-2007 17:49:38

Cita:

Empezado por roman
Y no olvides colocarlo aquí para que todos podamos reusarlo :D

// Saludos

¡Desde luego! estoy por comenzar un blog de mis andanzas con AJAX, solo para que los novatos tengan algo de referencia en español para comenzar, que por ahí anda manca internet cosa mala...

papulo 06-08-2007 18:15:53

Con esto en la CSS:
Código:

.direccionescompany{
    height: 120px;
    overflow: auto;
    }


y esto en la página con el código:

Código:

<div id="company_address_table" class="direccionescompany">
...código de la tabla...
</div>

Ya está funcionando a la perfección.

papulo 07-08-2007 10:28:30

Y aquí tenemos como dejar el encabezado (header) fijo mediante CSS y de forma independiente del navegador que estemos utilizando.

El enlace es algo engorroso, y debido a mis limitaciones sobre el conocimiento del lenguaje, no he podido sacarlo en claro todavía, pero para los que sabeis mas que yo no os supondrá un problema.

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

roman 07-08-2007 16:40:21

Lo acabo de probar, pero no me funciona en IE 7. De cualquier forma habrá que darle un vistazo. Es curioso, porque justo ayer estaba acordándome de esto, y viendo la hoja de cálculo de Google, me fijé que incluso ello usan una tabla separada para los encabezados. O sea que no debe ser fácil.

// Saludos

papulo 07-08-2007 16:55:32

A mi en firefox me funciona sin problemas, al menos el ejemplo de la página.

roman 07-08-2007 17:21:32

¡Ah sí! En firefox funciona perfecto, y en Opera también.

// Saludos


La franja horaria es GMT +2. Ahora son las 10:12:44.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Traducción al castellano por el equipo de moderadores del Club Delphi