scroll complicado

dieguicho · #1 (**permalink**) 29/04/2004, 19:19

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!!!!

kemie · #2 (**permalink**) 30/04/2004, 01:13

tendrias que separar tu tabla, de manera que las que no deben de estar fijas esten en un div con scroll o un iframe

furoya · #3 (**permalink**) 07/06/2004, 13:50

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

dieguicho · #4 (**permalink**) 07/06/2004, 17:59

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!

furoya · #5 (**permalink**) 11/06/2004, 13:25

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

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

dieguicho · #6 (**permalink**) 11/06/2004, 16:03

no agarre la indirecta.. perdon
este escript es excelente!!
puedo consultarte proximamente cuando empieze a adaptarlo?
gracias nuevamente!

furoya · #7 (**permalink**) 15/06/2004, 10:55

Sí, por supuesto, aunque a mi me gustó más el primero con JavaScript ( modestamente . . . ).

ingeneyro · #8 (**permalink**) 20/10/2009, 16:42

una pregunta, si quiero hacer una tabla similar pero con "n" filas

jomaruro · #9 (**permalink**) 20/10/2009, 17:36

Hola:

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

Saludos.

furoya · #10 (**permalink**) 25/10/2009, 09:47

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