Foros del Web » Creando para Internet » CSS »

scroll complicado

Estas en el tema de scroll complicado en el foro de CSS en Foros del Web. hola a todossss quien me da un consejito? tengo una tabla de 200 columnas ... efectivamente 200 columnas ahora bien.. quiero que las dos esten ...
  #1 (permalink)  
Antiguo 29/04/2004, 20:19
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
scroll complicado

hola a todossss

quien me da un consejito?

tengo una tabla de 200 columnas ... efectivamente 200 columnas
ahora bien.. quiero que las dos esten fijas... y las restantes 198 tengan algun "scroll" asi no se me va de la pantalla, es posible hacer algo asi? probe con un div con 400 px de ancho pero no se como acomodarlo para qeu deje afuera a las dos primeras...
cualquier punta me viene bien.. es una tontera pero no se me ocurre como resolverlo

saludos!!!!
__________________
On error no hago nada porque deje de fumar...
  #2 (permalink)  
Antiguo 30/04/2004, 02:13
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
tendrias que separar tu tabla, de manera que las que no deben de estar fijas esten en un div con scroll o un iframe
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #3 (permalink)  
Antiguo 07/06/2004, 14:50
(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:

dieguicho : 200 columnas es una guarangada!!. Pero si es lo que tienes, vamos a ver ...

Hice este código para mantener el encabezado de columnas, tú necesitas el de filas, pero te va a servir de ejemplo.
Funciona en IE, no sé cómo interpretan otros navegadores el offsetAlgo o las colecciones item[n], pero supongo que se puede adaptar a cada uno. De última, y teniendo en cuenta el foro en que estamos, para igualar las alturas o los anchos de las celdas fijas con las desplazables, se pueden medir "a mano" y nos ahorramos el script.

Código:
<HTML>
<HEAD>
<TITLE>TABLA CON SCROLL</TITLE>
<SCRIPT language= "JavaScript">
var ancho1,ancho2,i;
var columnas=5; //CANTIDAD DE COLUMNAS//

function ajustaCeldas(){
for(i=0;i<columnas;i++){
ancho1=document.getElementById("encabezado").rows.item(0).cells.item(i).offsetWidth;
ancho2=document.getElementById("datos").rows.item(0).cells.item(i).offsetWidth;
if(ancho1>ancho2){
document.getElementById("datos").rows.item(0).cells.item(i).width = ancho1-6};
else{
document.getElementById("encabezado").rows.item(0).cells.item(i).width = ancho2-6;}
}
}
</SCRIPT>
<STYLE>
#encabezado{border:0}
#encabezado th{border-width:1px}
#datos{border:0}
#datos td{border-width:1px}
</STYLE>

</HEAD>

<BODY onload=ajustaCeldas()>

<h2>Tabla con desplazamiento y encabezado fijo.</h2>
Para <b>IE</b>.
<p>

<table border=1 bgcolor=scrollbar align=center>
<td>
<table id="encabezado" border=1 cellspacing=0 cellpadding=2 bgcolor=#cccccc>
<tr>
<th>A </th><th>B </th><th>C </th><th>D </th><th>E </th>
</tr>
</table>

<div style="overflow:auto; height:100px; padding:0">

<table border=1 cellspacing=0 cellpadding=2 id="datos" bgcolor=white><tr>
<td>q</td><td>qwerty</td><td>qwerty</td><td>qwerty</td><td>qwertyuiop</td>
</tr><tr>
<td>q</td><td>qwerty</td><td>qwerty</td><td>qwerty</td><td>qwertyuiop</td>
</tr><tr>
<td>q</td><td>qwerty</td><td>qwerty</td><td>qwerty</td><td>qwertyuiop</td>
</tr><tr>
<td>q</td><td>qwerty</td><td>qwerty</td><td>qwerty</td><td>qwertyuiop</td>
</tr><tr>
<td>q</td><td>qwerty</td><td>qwerty</td><td>qwerty</td><td>qwertyuiop</td>
</tr><tr>
<td>q</td><td>qwerty</td><td>qwerty</td><td>qwerty</td><td>qwertyuiop</td>
</tr><tr>
<td>q</td><td>qwerty</td><td>qwerty</td><td>qwerty</td><td>qwertyuiop</td>
</tr><tr>
<td>q</td><td>qwerty</td><td>qwerty</td><td>qwerty</td><td>qwertyuiop</td>
</tr><tr>
<td>q</td><td>qwerty</td><td>qwerty</td><td>qwerty</td><td>qwertyuiop</td>
</tr><tr>
<td>q</td><td>qwerty</td><td>qwerty</td><td>qwerty</td><td>qwertyuiop</td>
</tr>
</table>

</div>

</td>
</table>

</BODY>
</HTML>
Tengo otra igual, pero hecha con IDs para reconocer las celdas.

saludos

furoya
  #4 (permalink)  
Antiguo 07/06/2004, 18:59
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
hola furoya eso esta muy bien...
pero tengo una problema
debo inmovilizar la primer columna completa.... y este ejemplo solo inmoviliza la primera fila.
se podra adaptar????????????/ muuuuchas gracias!
__________________
On error no hago nada porque deje de fumar...
  #5 (permalink)  
Antiguo 11/06/2004, 14:25
(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
Dije :
Cita:
Hice este código para mantener el encabezado de columnas, tú necesitas el de filas, pero te va a servir de ejemplo.
Dijiste :
Cita:
debo inmovilizar la primer columna completa.... y este ejemplo solo inmoviliza la primera fila. se podra adaptar?
_____y otra vez

_____y otra vez

Lo de "te va a servir de ejemplo" es una indirecta por "adáptalo tú". . .

Tienes suerte de que estuviera probando hacerlo con HTML. Todavía no me gusta como queda, lo del "ajuste a mano" puede dar demasiado trabajo y tampoco estoy seguro de que funcione en todos los navegadores. Por ahora ésto es lo que tengo.

Código:
 
<HTML>
<HEAD>
<TITLE>TABLA CON SCROLL</TITLE>
<STYLE>
#encabezado2{border:0}
#encabezado2 td{border-width:1px}
#datos2{border:0}
#datos2 td{border-width:1px; vertical-align:top; white-space:nowrap}
</STYLE>
</HEAD>
<BODY>

<h2>Tabla con desplazamiento y encabezado fijo.</h2>
Para <b>IE</b> ?.
<p>

<table border=1 bgcolor=scrollbar align=center>

<td style="vertical-align:top">

<table border=1 bgcolor="#cccccc" cellspacing=0 id="encabezado2">
<tr><td>&nbsp;</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3<br>&nbsp;</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</table>

</td>

<td style="vertical-align:top">

<div style="overflow:auto; overflow-y:hidden; width:160px; padding:0">

<table border=1 cellspacing=0 id="datos2" bgcolor=white>

<tr><th>Q</th><th>Q</th><th>Q</th><th>Q</th><th>Q</th><th>Q</th><th>Q</th><th>Q</th><th>Q</th><th>Q</th></tr>
<tr><td>qwertyuiop</td><td>qwertyuiop</td><td>qwertyuiop</td><td>qwertyuiop</td><td>qwertyuiop</td><td>qwerty</td><td>qwerty</td><td>qwertyuiop</td><td>qwerty</td><td>qwerty</td></tr>
<tr><td>qwertyuiop</td><td>qwertyuiop</td><td>qwertyuiop</td><td>qwertyuiop</td><td>qwertyuiop</td><td>qwerty</td><td>qwerty</td><td>qwertyuiop</td><td>qwerty</td><td>qwerty</td></tr>
<tr><td>qwertyuiop</td><td>qwertyuiop</td><td>qwertyuiop</td><td>qwertyuiop</td><td>
<nobr>qwert yuiop</nobr>
</td><td>
qwerty <br>qwerty
</td><td>qwerty</td><td>qwertyuiop</td><td>qwerty</td><td>qwerty</td></tr>
<tr><td>qwertyuiop</td><td>qwertyuiop</td><td>qwertyuiop</td><td>qwertyuiop</td><td>qwertyuiop</td><td>qwerty</td><td>qwerty</td><td>qwertyuiop</td><td>qwerty</td><td>qwerty</td></tr>
<tr><td>qwertyuiop</td><td>qwertyuiop</td><td>qwertyuiop</td><td>qwertyuiop</td><td>qwertyuiop</td><td>qwerty</td><td>qwerty</td><td>qwertyuiop</td><td>qwerty</td><td>qwerty</td></tr>
<tr><td>qwertyuiop</td><td>qwertyuiop</td><td>qwertyuiop</td><td>qwertyuiop</td><td>qwertyuiop</td><td>qwerty</td><td>qwerty</td><td>qwertyuiop</td><td>qwerty</td><td>qwerty</td></tr>
<tr><td colspan=10 //CANTIDAD DE COLUMNAS ¡SIN ENCABEZADO!//>&nbsp;</td></tr>

</table>

</div>

</td>

</table>

</BODY>
</HTML>
Destaqué con azul el detalle para las celdas de más de una línea. La etiqueta NOBR es para IE5, las nuevas versiones aceptan el white-space.

saludos

furoya
  #6 (permalink)  
Antiguo 11/06/2004, 17:03
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
no agarre la indirecta.. perdon
este escript es excelente!!
puedo consultarte proximamente cuando empieze a adaptarlo?
gracias nuevamente!
__________________
On error no hago nada porque deje de fumar...
  #7 (permalink)  
Antiguo 15/06/2004, 11:55
(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
Sí, por supuesto, aunque a mi me gustó más el primero con JavaScript ( modestamente . . . ).
  #8 (permalink)  
Antiguo 20/10/2009, 17:42
Avatar de ingeneyro  
Fecha de Ingreso: enero-2008
Ubicación: DF
Mensajes: 40
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: scroll complicado

una pregunta, si quiero hacer una tabla similar pero con "n" filas
  #9 (permalink)  
Antiguo 20/10/2009, 18:36
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: scroll complicado

Hola:

Tendrás que hacerlo con algún lenguaje de programación, javascript, AJAX, Java, PHP, ASP, JS.

Saludos.

  #10 (permalink)  
Antiguo 25/10/2009, 10:47
(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
Respuesta: scroll complicado

Hola chicos :

Estos ejemplos son para IExplorer. En el enlace que dejo al final hay uno que también es discutible semanticamente, pero funciona en Internet Explorer, Firefox, Opera y Chrome. Y para encabezados de columna y fila.

También está lo de las "n" columnas. Lo que se cuenta es la colección; en el caso que nos ocupa, sería de td.

Código:
var misColumnas = document.getElementById( "miFila" ).getElementsByTagName( "td" ).length;
Donde "miFila", por supuesto, es el identificador de la primer tr (o la última, o la del medio; da lo mismo porque todas tienen la misma cantidad de celdas).

Otro detalle en el ejemplo del enlace es que hay un agregado por una pregunta de renvi. Por supuesto que si alguien va a usar sólo la tabla, lo borra.

Estaba seguro de que para los encabezados de columna se podía usar una fila de th encima de un
tbody con scrollbar; pero no me anda. Quizá esté haciendo algo mal; si funciona, nos ahorramos todo el javascript.

Inmovilizar Columnas y Filas #17
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 17:39.