Inmovilizar Columnas y Filas

[polvi]

holas, estoy tratando de inmovilizar (al estilo excel), la primera fila y la primera columna , lo intente haciendo con tablas y div , pero solo me resulta para una de las dos, lo uqe quiero es lo que ocurre con las filas y columnas cabeceras de excel, es decir si me muevo con el scroll horizontal dejar fijo la primera columna, y si muevo el scroll vertical dejar fijo la primera fila... alguien me puede ayudar!!! por favor!!!

desde ya muchas gracias

[polvi]

Estimado sys_engineer
si, pero no se como hacer que al mover el scroll horizontal del frame donde dejo los datos se mueva el frame de la fila cabecera...lo mismo cuando muevo el frame vertical, que se mueva el frame de columna cabcera...
por eso intente hacerlo con capas...
pero ha sido imposible lograra algo....

ahh, y la verdad es que soy estimad"A"

gracias...

[Wako]

Creo que esto es lo que quieres ve este enlace a ver si te sirve

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

Saludos

[polvi]

casi...es que además de la primera fila, debo dejar fija la primera columna,para que, si el usuario se mueve hacia el lado se mantenga visible la 1º columna donde muestro las varibles...

Saludos...

[furoya]

Hola todos :

Antes que nada, ese papelón "de género" también me pasó a mí. En su momento se me ocurrió que una manera de evitarlos era poner alguna diferencia de color en el nickname para que todos sepamos como tratarnos entre nosotros al escribir. No sería un acto discriminatorio. Si nuestro idioma tiene 2 géneros es para usarlos correctamente.

Bueno, pero el tema es otro.

Empecemos con las buenas noticias, polvi. Te dije que las hojas de cálculo no se movían así, pero es porque yo buscaba fijar los encabezados que trae la propia tabla. Si seleccionamos la celda "B 2" se pueden fijar las primeras fila y columna perfectamente.

Y, como dicen por ahí, estoy 99% seguro de que lo tuyo se puede hacer.

Los problemas -como te mencioné en el MP- aparecen principalmente al adaptarlos a cada tabla.
Las celdas serán, de preferencia, del mismo tamaño; el texto en fuente monospace, con un límite de caracteres y sin saltos de línea. Si las vas a escribir con lenguaje de servidor (p.e. PHP) vas a tener que asegurarte de eso.

Otra mala noticia es que de momento estoy sin máquina, espero que lo tuyo no tenga apuro porque en estas condiciones se puede demorar algo el código.

De cualquier forma, voy a explicarte las 2 ideas con las que pienso empezar a trabajar. Así si alguien se me quiere adelantar tendrá algo con qué comenzar.

Hay que usar 3 tablas. La del contenido; una con 1 fila y la misma cantidad de columnas que el contenido y otra con 1 columna y las mismas filas que el contenido (serán encabezado de columnas y filas respectivamente).

Se pone cada una en un DIV con overflow:hidden los encabezados y auto el contenido y se las ubica en su posición.

Un escript leerá el desplazamiento de contenido y pasará la misma cantidad de pixeles a otro escript que va a arrastrarlos en los encabezados hacia arriba o hacia la izquierda (en + ó en -) según corresponda. Es decir, si arrastramos la barra de desplazamiento hasta 50px a la derecha, la tabla contenido se va a mover 50px para atrás (obvio), y los escripts van a mover la tabla de títulos de columna 50px hacia la izquierda; no a la de filas, porque esa se mueve sólo con el desplazamiento vertical.

Otra versión usaría botones y no barras para el desplazamiento del contenido, y saltaría "celda a celda"; en este caso no es necesario desplazar encabezados. si la primera celda visible es "C 12", se reescriben los contenidos de las tablas de títulos para que empiecen en "C" y "12".

La última sería un híbrido entre ambas. Se desplaza con botones px por px a cada tabla como en el primer ejemplo.

En cuanto tenga un prototipo lo posteo.

saludos

furoya

[gaspampera]

Adjuntandome a este problema, haciendo lo que habeis comentado de los DIV, consigo efectivamente scroll vertical y no perder la cabecera, el problema que me surge es que cuando tengo muchas líneas en el DIV, me desplaza toda la pantalla hacia abajo.

¿Alguna sugerencia, please?... estoy desesperado con este tema.

Un abrazo.

[furoya]

Hola de nuevo :

gaspampera : creo que hay una forma de fijar los th con CSS, que no funciona en todos los navegadores.

Acá hay un enlace que te puede servir

Inmovilizar filas de Html

y hay más usando el buscador.

polvi : no me olvidé de lo tuyo.

saludos

furoya

[furoya]

Yo de nuevo.

estuve trabado ¡3 horas! intentando resolver algo absurdo que aún no sé por qué ocurre y no tiene nada que ver con el motor del escript que se pide desde el principio.

No puedo darle a las celdas el mismo tamaño.

Lo "resolví" con otro script totalmente ridículo -es decir, no lo resolví- que reescribe cada celda agregando una imagen (falsa) para forzar a la tabla a mantener un ancho fijo.
Pero ya pregunté en el foro de CSS cómo se hace bien.

Igual dejo el borrador como para tranquilizar a todos los que están 'desesperados'. Se puede, sólo hay que pulirlo y probar con otros métodos más.

Código:

 
<HTML>
<HEAD>
<TITLE>MOVER ENC. prueba 02</TITLE>
<script language= "JavaScript">
var ancho , alto , cCeldas , celdas , pasoH , pasoV;

function iniciar(){
celdas0 = document.getElementById("encCol").getElementsByTagName("td").length;
celdas1 = document.getElementById("contenido").getElementsByTagName("td").length;

for (i=0; i<celdas0;i++){
cCeldas = document.getElementById("encCol").getElementsByTagName("td").item(i).innerHTML;
document.getElementById("encCol").getElementsByTagName("td").item(i).innerHTML = cCeldas+"<img class=\"rell\">";
}

for (j=0; j<celdas1;j++){
cCeldas = document.getElementById("contenido").getElementsByTagName("td").item(j).innerHTML;
document.getElementById("contenido").getElementsByTagName("td").item(j).innerHTML = cCeldas+"<img class=\"rell\">";
}

}

function desplaza(){
pasoH = document.getElementById("contenedor").scrollLeft;
pasoV = document.getElementById("contenedor").scrollTop;
document.getElementById("contEncCol").scrollLeft = pasoH;
document.getElementById("contEncFil").scrollTop = pasoV;
}

</script>
<style>
table{border-collapse:collapse}
table td{font:12px monospace; border:1px solid; text-align:center; height:1.5em}
#contEncCol{overflow:hidden; overflow-y:scroll; background:#ccc; width:20em}
#contEncFil{overflow:hidden; overflow-x:scroll; background:#ccc; height:8em}
#contenedor{overflow:auto; width:20em; height:8em}
#contenido{}
.tabla td{border:1px solid; width:7em}
.rell{width:7em; height:0; position:relative; top:-1em; z-index:-1; bor der:1px solid red}
</style>
</HEAD>
<BODY onload=iniciar()>
<h2>Tabla que desplaza encabezados con el contenido.</h2>

<table>
<tr>
<td>/</td>
<td>
<div id="contEncCol">
 <table class="tabla" id="encCol">
 <tr>
 <td> A </td><td> B </td><td> C </td><td> D </td>
 </tr>
 </table>
</div>
</td>
</tr>

<tr>
<td>
<div id="contEncFil">
 <table Id="encFil">
 <tr><td>1</td></tr>
 <tr><td>2</td></tr>
 <tr><td>3</td></tr>
 <tr><td>4</td></tr>
 <tr><td>5</td></tr>
 <tr><td>6</td></tr>
 </table>
</div>
</td>
<td>
<div id="contenedor" onscroll="desplaza()">
 <table class="tabla" id= "contenido">
 <tr>
 <td> alfa</td><td> bravo</td><td> charly</td><td> delta</td>
 </tr>
 <tr>
 <td> eco</td><td> foxtrot</td><td> golf</td><td> hotel</td>
 </tr>
 <tr>
 <td> indio</td><td> julieta</td><td> kilo</td><td> lima</td>
 </tr>
 <tr>
 <td> mike</td><td> noviembre</td><td> oscar</td><td> papa</td>
 </tr>
 <tr>
 <td> quebec</td><td> romeo</td><td> sierra</td><td> tango</td>
 </tr>
 <tr>
 <td> uniforme</td><td> victor</td><td> whisky</td><td> x-ray</td>
 </tr>
 </table>
</div>
</td>
</tr>
</table>

</BODY>
</HTML>

Un dato más : el editor del foro se ha tomado la costumbre de insertar espacios y saltos en medio del código (Separaciones en el código y en el texto ). Exeptuando el que yo marqué en rojo, si aparecen otros hay que corregirlos.

saludos

furoya

[polvi]

Gracias Furoya, te pasate, esto me sireve muchisimo, para empezar...
gracias!!!!


Es muy bueno...!!!!!

[furoya]

Aguarda a que funcione minimamente bien para darme las gracias.

En fin, que no puedo resolver lo del ancho de las celdas. Voy a dejar aquí la última versión que tengo y empiezo a trabajar con otra idea para mostrar la tabla hasta que se nos ocurra algo, porque eso de poner imágenes espaciadoras es una chanchada hasta para mí.

Dime polvi, ¿ tu tabla es de este tipo, o el tamaño debe ocupar toda la página ?. Quiero decir, si es tan grande como para tener un título y que el resto sea solamente tabla.
Porque quizá se pueda hacer con marcos y varios documentos (Encabezado filas, Encabezado columnas, contenido, el Título de la página) como propuso sys_engineer. Tal vez así sea más fácil adaptarlo después a otros navegadores -éste es para IE-.

Código:

 
<html>
<head>
<title>MOVER ENC. prueba 05</title>
<script language= "JavaScript">
var anchoCelda , altoCelda , contCeldas , pasoH , pasoV ,celdas1 , celdas2 ;
var dif = 2;

function iniciar(){
celdas1 = document.getElementById("filRell").getElementsByTagName( "td" ).length;
celdas2 = document.getElementById("encFil").getElementsByTagName( "td" ).length;
if(document.all) dif=0;

for (j=0; j < celdas1; j++){
var anchoEnc = 0;
var anchoTab = 0;

anchoEnc = document.getElementById( "encCol" ).getElementsByTagName( "td" ).item(j).offsetWidth;
anchoTab = document.getElementById( "filRell" ).getElementsByTagName( "td" ).item(j).offsetWidth;

anchoCelda = (anchoTab > anchoEnc) ?  document.getElementById("filRell").getElementsByTagName( "td" ).item(j).offsetWidth : document.getElementById("encCol").getElementsByTagName( "td" ).item(j).offsetWidth;

if(anchoCelda < 40) anchoCelda = 40; //ANCHO MÍNIMO DE CELDA px

contCeldas = document.getElementById( "filRell" ).getElementsByTagName( "td" ).item(j).innerHTML;
document.getElementById( "filRell" ).getElementsByTagName( "td" ).item(j).innerHTML = contCeldas+"<img style=\"height:0; width:"+anchoCelda+"px;\" class=\"rellH\">";

contCeldas = document.getElementById( "encCol" ).getElementsByTagName( "td" ).item(j).innerHTML;
document.getElementById( "encCol" ).getElementsByTagName( "td" ).item(j).innerHTML ="<img style=\"height:0; width:"+(anchoCelda-dif)+"px;\" class=\"rellH\"><br>"+contCeldas;
}


document.getElementById("contenido").className = "tabla";


for (i=0; i < celdas2; i++){
var altoEnc = 0;
var altoTab = 0;
altoEnc = document.getElementById( "encFil" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).offsetHeight;
altoTab = document.getElementById( "contenido" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).offsetHeight;

altoCelda = (altoTab > altoEnc)? document.getElementById( "contenido" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).offsetHeight : document.getElementById( "encFil" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).offsetHeight;

document.getElementById( "contenido" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).style.height = altoCelda+"px";

document.getElementById( "encFil" ).getElementsByTagName( "td" ).item(i).style.height = altoCelda+"px";
}
}

function desplaza(){
pasoH = document.getElementById("contenedor").scrollLeft;
pasoV = document.getElementById("contenedor").scrollTop;
document.getElementById("contEncCol").scrollLeft = pasoH;
document.getElementById("contEncFil").scrollTop = pasoV;
}

</script>
<style>
#alfabetos{border-collapse:collapse; background:buttonface;}

#alfabetos td{font:12px "arial" "helvetica" "sans-serif"; border:1px solid; text-align:center; vertical-align:top; }

html>body #contEncCol{overflow:-moz-scrollbars-vertical; background:#ccf width:16em; //ANCHO TABLA}
* html #contEncCol{overflow:hidden; overflow-y:scroll; background:#ccf; width:16em; //ANCHO TABLA}

html>body #contEncFil{overflow:-moz-scrollbars-horizontal; background:#ccf; height:8em; //ALTO TABLA}
* html #contEncFil{overflow:hidden; overflow-x:scroll; background:#ccf; height:8em; //ALTO TABLA}

#contEncCol , #contEncFil{scrollbar-face-color:buttonface; scrollbar-highlight-color:buttonface; scrollbar-shadow-color:buttonface; scrollbar-arrow-color:buttonface; scrollbar-track-color:buttonface; scrollbar-base-color:buttonface; scrollbar-3dlight-color:buttonface; scrollbar-darkshadow-color:buttonface; }

#contenedor{overflow:auto; width:16em; height:8em; //ANCHO Y ALTO TABLA}

#encCol td{text-align:center; vertical-align:middle; border:1px solid;}
#encFil {width:100%;}
#encCol {height:100%}

#contenido{background:#fff;}

#contenido td{text-align:left; white-space:nowrap;}

.tabla td{border:1px solid;}

.rellH{ position:relative; top:0; z-index:-1; bor¬der:1px solid red;}
</style>
</head>

<body onload="setTimeout('iniciar()' ,500)">
<h2>Tabla que desplaza encabezados con el contenido.</h2>

<table id="alfabetos">
<tr>
<td></td>
<td>
<div id="contEncCol">
 <table id="encCol">
 <tr>
 <td> A </td><td> B </td><td> C </td><td> D </td><td> E </td>
 </tr>
 </table>
</div>
</td>
</tr>

<tr>
<td>
<div id="contEncFil">
 <table id="encFil">
 <tr><td>1</td></tr>
 <tr><td>2</td></tr>
 <tr><td>3</td></tr>
 <tr><td>4</td></tr>
 <tr><td>5</td></tr>
 <tr><td>6</td></tr>
 <tr><td> <!-- FILA VACÍA --> </td></tr>
 </table>
</div>
</td>
<td>
<div id="contenedor" onscroll="desplaza()">
 <table id="contenido">
 <tr>
 <td> ñ</td><td> alfa</td><td> bravo</td><td> charly</td><td> delta</td>
 </tr>
 <tr>
 <td> ñ</td><td> eco</td><td> foxtrot</td><td> golf</td><td> hotel</td>
 </tr>
 <tr>
 <td> ñ</td><td> indio</td><td> julieta</td><td> kilo</td><td> lima</td>
 </tr>
 <tr>
 <td> ñ </td><td> mike</td><td> noviembre <br><i>un salto</i></td><td> oscar</td><td> papa</td>
 </tr>
 <tr>
 <td> ñ ñ</td><td> quebec</td><td> romeo</td><td> sierra</td><td> tango</td>
 </tr>
 <tr>
 <td> ñ </td><td> uniforme</td><td> victor</td><td> whisky</td><td> x-ray</td>
 </tr>
 <tr id="filRell">
 <td> <!-- FILA VACÍA --> </td><td> </td><td> </td><td> </td><td> </td>
 </tr>
 </table>
</div>
</td>
</tr>
</table>
<p>
<b>NOTAS : </b>
<ol type="1">
<li>El ancho mínimo de las celdas es de 40px.
<li>El ancho se calcula tomando el mayor valor entre la celda de encabezado y la de contenido en cada columna.
<li>El texto en las celdas no tiene salto de línea hasta un <tt>&lt;br></tt>. (<i>Bug</i> IE5 : si el texto supera el ancho mínimo, salta en cada espacio, guión, ...)
<li>Al estar calculado en <tt>em</tt>, cambiando la medida de fuente en la tabla principal, se ajustan las medidas interiores (excepto el ancho mínimo).

<li>En IE5 se ven las <i>scrollbars</i> de relleno.
</ol>
</body>
</html>

saludos

furoya

P,D. : lo arreglé para FF.
gaspampera, aquí puedes ver còmo los encabezados de fila se ajustan a las celdas que tienen salto de línea.

[furoya]

Intenté hacer una versión con iframe, pero me encontré con la novedad ( para mí ) de que el IE6, o el XP, o alguna combinación de ambos no permite la lectura o la modificación entre documentos, aún cuando se encontrasen en el mismo directorio.

Lo mismo debe pasar con todos los marcos; así quer abandoné el proyecto.

También empecé a probar con una página dentro de un object, pero no tengo idea de cómo manejarla desde el documento que la contiene.

A menos que alguien postee una idea mejor, creo que habrá que conformarse con el código que puse arriba.

Lo arreglé para Firefox ( no sé qué versión ) y aunque no se ve muy bien es -por lo menos- usable.

saludos

furoya

[polvi]

Holas, perdón por haber desaparecido, pero el primer ejemplo me funcionó sin las imagenes, ya que la tabla que tengo las celdas tienen un ancho fijo (el mismo para el ancabezado y el mismo para las celdas de los datos). Así que les asigné el ancho en vez de usar la imagen.
Por eso.. muuuuuuuuuchas gracias....


Saludos.
Polvi

[furoya]

De nada. Qué bueno que algo de todo esto te sirva. Si no hubieses insistido aún seguiría pensando que el asunto no tenía una solución práctica.

Voy a aprovechar el tema para postear un par de versiones más; el no andar desparramando los códigos por todo el foro ayuda a los ( todavía pocos ) que usan el buscador.

Esta tabla es previa a la que puse arriba; estaba convencido de que se veía mal, aunque ahora -no sé si por la costumbre de verla- me parece aceptable. No la probé en Firefox ( y sería un milagro que funcionara en Opera ), por eso la pongo aquí y no en lugar de la anterior.

Código:

<html>
<head>
<title>MOVER ENCABEZADOS CON LA TABLA. </title>
<script language= "JavaScript">
var anchoCelda , altoCelda , contCeldas , pasoH , pasoV ,celdas1 , celdas2 ;
var dif = 2;

function iniciar(){
celdas1 = document.getElementById("filRell").getElementsByTagName( "td" ).length;
celdas2 = document.getElementById("encFil").getElementsByTagName( "td" ).length-1;
if(document.all) dif=0;

for (j=0; j < celdas1; j++){
var anchoEnc = 0;
var anchoTab = 0;

anchoEnc = document.getElementById( "encCol" ).getElementsByTagName( "td" ).item(j).offsetWidth;
anchoTab = document.getElementById( "filRell" ).getElementsByTagName( "td" ).item(j).offsetWidth;

anchoCelda = (anchoTab > anchoEnc) ?  document.getElementById("filRell").getElementsByTagName( "td" ).item(j).offsetWidth : document.getElementById("encCol").getElementsByTagName( "td" ).item(j).offsetWidth;

if(anchoCelda < 40) anchoCelda = 40; //ANCHO MÍNIMO DE CELDA px

contCeldas = document.getElementById( "filRell" ).getElementsByTagName( "td" ).item(j).innerHTML;
document.getElementById( "filRell" ).getElementsByTagName( "td" ).item(j).innerHTML = contCeldas+"<img style=\"height:0; width:"+anchoCelda+"px;\" class=\"rellH\">";

contCeldas = document.getElementById( "encCol" ).getElementsByTagName( "td" ).item(j).innerHTML;
document.getElementById( "encCol" ).getElementsByTagName( "td" ).item(j).innerHTML ="<img style=\"height:0; width:"+(anchoCelda-dif)+"px;\" class=\"rellH\"><br>"+contCeldas;
}


document.getElementById("contenido").className = "tabla";


for (i=0; i < celdas2; i++){
var altoEnc = 0;
var altoTab = 0;
altoEnc = document.getElementById( "encFil" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).offsetHeight;
altoTab = document.getElementById( "contenido" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).offsetHeight;

altoCelda = (altoTab > altoEnc)? document.getElementById( "contenido" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).offsetHeight : document.getElementById( "encFil" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).offsetHeight;

document.getElementById( "contenido" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).style.height = altoCelda+"px";

document.getElementById( "encFil" ).getElementsByTagName( "td" ).item(i).style.height = altoCelda+"px";
}
}

function desplaza(){
pasoH = document.getElementById("contenedor").scrollLeft;
pasoV = document.getElementById("contenedor").scrollTop;
document.getElementById("contEncCol").scrollLeft = pasoH;
document.getElementById("contEncFil").scrollTop = pasoV;
}

</script>
<style>
#alfabetos{border-collapse:collapse; background:buttonface;}

#alfabetos td{font:12px "arial" "helvetica" "sans-serif"; border:1px solid; text-align:center; vertical-align:top; }

#contEncCol{overflow:hidden; background:ButtonHighlight; width:16em; //ANCHO TABLA}

#contEncFil{overflow:hidden; background:ButtonHighlight; height:8em; //ALTO TABLA}

#contenedor{overflow:auto; width:16em; height:8em; //ANCHO Y ALTO TABLA}

#encCol td{text-align:center; vertical-align:middle; border:1px solid;}
#encFil {width:100%;
z-index:-1;
}
#encCol {height:100%; 
z-index:-1;
}

#contenido{background:#fff;}

#contenido td{text-align:left; white-space:nowrap;}

#rellEncFil{height:80px; width:0; }
#rellEncCol{height:0; width:80px; }

.tabla td{border:1px solid;}

.rellH{ position:relative; top:0; z-index:-1; bor¬der:1px solid red;}
</style>
</head>

<body onload="setTimeout('iniciar()' ,500)">
<h2>Tabla que desplaza encabezados con el contenido.</h2>
para <b>IE </b>.
<p>
<table id="alfabetos">
<tr>
<td></td>
<td>
<div id="contEncCol">
 <table id="encCol">
 <tr>
 <td> A </td><td> B </td><td> C </td><td> D </td><td> E </td>
 <td><img id="rellEncCol" src=""></td>
 </tr>
 </table>
</div>
</td>
</tr>

<tr>
<td>
<div id="contEncFil">
 <table id="encFil">
 <tr><td>1</td></tr>
 <tr><td>2</td></tr>
 <tr><td>3</td></tr>
 <tr><td>4</td></tr>
 <tr><td>5</td></tr>
 <tr><td>6</td></tr>
 <tr><td><!--VACÍO--></td></tr>
 <tr><td><img id="rellEncFil" src=""></td></tr>
 </table>
</div>
</td>
<td>
<div id="contenedor" onscroll="desplaza()">
 <table id="contenido">
 <tr>
 <td> ñ</td><td> alfa</td><td> bravo</td><td> charly</td><td> delta</td>
 </tr>
 <tr>
 <td> ñ</td><td> eco</td><td> foxtrot</td><td> golf</td><td> hotel</td>
 </tr>
 <tr>
 <td> ñ</td><td> indio</td><td> julieta</td><td> kilo</td><td> lima</td>
 </tr>
 <tr>
 <td> ñ </td><td> mike</td><td> noviembre <br><i>un salto</i></td><td> oscar</td><td> papa</td>
 </tr>
 <tr>
 <td> ñ ñ</td><td> quebec</td><td> romeo</td><td> sierra</td><td> tango</td>
 </tr>
 <tr>
 <td> ñ </td><td> uniforme</td><td> victor</td><td> whisky</td><td> x-ray</td>
 </tr>
 <tr id="filRell">
 <td> <!-- FILA VACÍA --> </td><td> </td><td> </td><td> </td><td> </td>
 </tr>
 </table>
</div>
</td>
</tr>
</table>
</p>
<b>NOTAS : </b>
<ol type="1">
<li>El ancho m&iacute;nimo de las celdas es de 40px.
<li>El ancho se calcula tomando el mayor valor entre la celda de encabezado y la de contenido en cada columna.
<li>El texto en las celdas no tiene salto de l&iacute;nea hasta un <tt>&lt;br /></tt>. (<i>Bug</i> IE5 : si el texto supera el ancho m&iacute;nimo, salta en cada espacio, gui&oacute;n, ...)
<li>Al estar calculado en <tt>em</tt>, cambiando la medida de fuente en la tabla principal, se ajustan las medidas interiores (excepto el ancho m&iacute;nimo).
</ol>

</body>
</html>

La ventaja está en que se eliminan las scrollbars "espaciadoras" y, claro, el hack para IE/Moz, solamente agregando un par de celdas.

sigue en el pròximo mensaje ...

[furoya]

... viene del mensaje anterior.


El segundo código es totalmente distinto. La idea es poner una tabla a la cual se le extrae el contenido para guardarlo en un Array BiDi ( a modo de Base de Datos ) y luego se la elimina.
El siguiente paso es escribir con JS una nueva tabla con una cantidad menor de filas y columnas, y 4 botones que "rellenan" esa tabla manteniendo el orden que tenían los datos en la original. Y, por supuesto, acomodando los encabezados.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>DESPLAZA TABLA.</title>
<script language= "JavaScript">
var contTab =new Array();
var contTabN ="";
var columnas = 5; /*CANTIDAD FINAL DE COLUMNAS*/
var filas = 5; /*CANTIDAD FINAL DE FILAS*/
var filasI = 0;
var columnasI = 0;
var paso = 1;
var C, F, tabla, totTr, totTd, repite ;

function inicio(){
tabla = document.getElementById("contieneTabla");
var contTab0 = tabla.innerHTML ;
totTr = tabla.getElementsByTagName( "tr").length;
totTd = tabla.getElementsByTagName( "tr").item(0).getElementsByTagName( "td").length;
if((columnas>totTd) || (filas>totTr)){
alert("ERROR en la cantidad de filas y/o columnas.");
}
else{
for(C=0; C<totTr; C++){
contTab[C]= new Array(totTd);
for( F=0; F<totTd; F++){
contTab[C][F]= tabla.getElementsByTagName( "tr").item(C).getElementsByTagName( 

"td").item(F).innerHTML;
}
}
tabla.innerHTML = "";
reEscribeTabla();
}
}


function reEscribeTabla(){
if(filasI < 0){filasI = 0;}
if(columnasI < 0){columnasI = 0;}
if(filasI >= totTr-filas){filasI = totTr-filas;}
if(columnasI >= totTd-columnas){columnasI = totTd-columnas;}

var columnasF = columnasI*1 + columnas*1;
var filasF = filasI*1 + filas*1;

contTabN = '<table>\r\n';
for(J=filasI; J<filasF; J++){
contTabN += '<TR>\r\n';
for(K=columnasI;K<columnasF;K++){
contTabN += '<td>'+contTab[J][K]+'</td>\r\n'
}
contTabN += '</tr>\r\n'
}
contTabN += '</table>'; 
tabla.innerHTML = contTabN;

tabla.getElementsByTagName( "tr").item(0).className = "cabColumna";

setTimeout("escribeEncabezados()", 5)
}

function escribeEncabezados(){
for(K=0; K<columnas; K++){
tabla.getElementsByTagName( "tr").item(0).getElementsByTagName( "td").item(K).innerHTML = 

contTab[0][(columnasI*1)+K];
}

for(L=0; L<filas; L++){
var estaCelda = tabla.getElementsByTagName( "tr").item(L).getElementsByTagName( 

"td").item(0);
estaCelda.innerHTML = contTab[(filasI*1)+L][0];
estaCelda.className = "cabFila";
}

tabla.getElementsByTagName( "td").item(0).innerHTML = "<font>╬</font>";
}



function derecha(){
if(columnasI < columnas){
columnasI += paso;
reEscribeTabla();
repite = setTimeout("derecha()" , 1500);
}
}

function izquierda(){
if(columnasI > 0){
columnasI -= paso;
reEscribeTabla();
repite = setTimeout("izquierda()" , 1500)
}
}

function arriba(){
if(filasI > 0){
filasI -= paso;
reEscribeTabla();
repite = setTimeout("arriba()" , 1500)
}
}

function abajo(){
if(filasI < filas){
filasI += paso;
reEscribeTabla();
repite = setTimeout("abajo()" , 1500)
}
}

function detiene(T,cN){
T.className = cN;
clearTimeout(repite);
paso=1;
}
</script>
<style>
#contieneTabla table{border:3px double; }
#contieneTabla table td{text-align:center; vertical-align:top; border:1px solid; }
#contieneTabla table td font{font-weight:normal; }
#botonera td{font-size:120%; font-family:arial, 'Times New Roman', helvetica , Times; 

cursor:default; }
.cabFila{background:#ccc; font-weight:900; }
.cabColumna{background:#ccc; font-weight:900; }
.esp{width:1em; }
.boton{border:3px outset; background:buttonface; }
.sobre{border:3px inset; background:buttonface; }
.bajo{border-width:4px 2px 2px 4px; border-style:inset; background:InactiveCaption; }
</style>
</head>
<body onload="alert('Esta es la tabla completa antes de reducirse.'); 

setTimeout('inicio()',500)">

<h2>Reduce tabla y desplaza manteniendo los encabezados.</h2>
<p>
Los botones desplazan de a una celda con <tt>mouseover</tt> de a una p&aacute;gina con 

<tt>mousedown</tt>.
</p>

<table id="botonera">
<td class="boton" onmouseover="arriba(); this.className='sobre';" 

onmousedown="paso=columnas;arriba(); this.className='bajo';" 

onmouseup="detiene(this,'sobre')" onmouseout="detiene(this,'boton')">&#9650;</td>
<td class="esp"></td>
<td class="boton" onmouseover="abajo(); this.className='sobre';" 

onmousedown="paso=columnas;abajo(); this.className='bajo';" 

onmouseup="detiene(this,'sobre')" 
onmouseout="detiene(this,'boton')">&#9660;</td>
<td class="esp"></td>
<td class="boton" onmouseover="izquierda(); this.className='sobre';" 

onmousedown="paso=columnas;izquierda(); this.className='bajo';" 

onmouseup="detiene(this,'sobre')" onmouseout="detiene(this,'boton')">&#9668;</td>
<td class="esp"></td>
<td  class="boton"onmouseover="derecha(); this.className='sobre';" 

onmousedown="paso=columnas;derecha(); this.className='bajo';" 

onmouseup="detiene(this,'sobre')" onmouseout="detiene(this,'boton')">&#9658;</td>
</table>

<br />

<div id="contieneTabla">
<table>
<tbody>
<tr><td> 0</td><td> A</td><td> B</td><td> C</td><td> D</td><td> E</td><td> F</td><td> 

G</td><td> H</td><td> I</td></tr>
<tr><td> 1</td><td> 1a</td><td> 1b</td><td> 1c</td><td> 1d</td><td> 1e</td><td> 1f</td><td> 

1g</td><td> 1h</td><td> 1i</td></tr>
<tr><td> 2</td><td> 2a</td><td> 2b</td><td> 2c</td><td> 2d</td><td> 2e</td><td> 2f</td><td> 

2g</td><td> 2h</td><td> 2i</td></tr>
<tr><td> 3</td><td> 3a</td><td> 3b</td><td> 3c</td><td> 3d</td><td> 3e</td><td> 3f 

QWERT</td><td> 3g</td><td> 3h</td><td> 3i</td></tr>
<tr><td> 4</td><td> 4a</td><td> 4b</td><td> 4c</td><td> 4d</td><td> 4e</td><td> 4f</td><td> 

4g</td><td> 4h</td><td> 4i</td></tr>
<tr><td> 5</td><td> 5a</td><td> 5b</td><td> 5c</td><td> 5d</td><td> 5e</td><td> 5f</td><td> 

5g<br>salto</td><td> 5h</td><td> 5i QWERTY</td></tr>
<tr><td> 6</td><td> 6a</td><td> 6b</td><td> 6c</td><td> 6d</td><td> 6e</td><td> 6f</td><td> 

6g</td><td> 6h</td><td> 6i</td></tr>
<tr><td> 7</td><td> 7a</td><td> 7b</td><td> 7c</td><td> 7d QWERTY</td><td> 7e</td><td> 

7f</td><td> 7g</td><td> 7h</td><td> 7i</td></tr>
<tr><td> 8</td><td> 8a</td><td> 8b</td><td> 8c</td><td> 8d</td><td> 8e</td><td> 8f</td><td> 

8g</td><td> 8h</td><td> 8i</td></tr>
<tr><td> 9</td><td> 9a</td><td> 9b</td><td> 9c</td><td> 9d</td><td> 9e</td><td> 9f</td><td> 

9g</td><td> 9h</td><td> 9i</td></tr>
</tbody>
</table>
</div>

</body>
</html>

El efecto podrá ser estéticamente lamentable, pero tiene algunas ventajas sobre el código anterior

• Las celdas no cortan el contenido, ya que la tabla se redimensiona a él.
• Agregando campos de formulario, el usuario puede elegir el ancho y el alto ( en celdas ) de su tabla final
• Una vez que tenga sus datos a la vista, podrá reescribir la cabeceras para que empiecen en "1" y "A", con lo que obtendría una nueva tabla con los datos a pedido.
• Se puede extraer el código fuente de esta última tabla.
• Tambián se puede abrir en una nueva ventana para imprimirla.

Está probada en IExplorer y Firefox. Seguramente habrá que hacerle algunos retoques para verla en otros navegadores.

Hay más sobre "bases de datos" en Array y una página con ejemplos de caricatos () en

Manipular array

saludos

furoya

[renvi]

Hola furoya.

Espero que todavia esten en este tema pues las fechas ya son de añoas atraz.

Revice el foro y especificamente el resultado que lo colocaste con el titulo MOVER ENC. prueba 02.
Todo bien cuando lo probe con los datos que tenia en forma fija es decir datos sacados de un excel hacia el html.

El problema es el siguiente tengo un formulario que dependiendo de las opciones se generan los datos, ahora el formulario llama a un ajax y este es el que le popula de datos a la tabla y a la estructura que tu posteaste en la parte superior, todo bien pero cuando se presenta la informacion la tabla superior es decir los nombres de las columnas pierden el tamaño, que supongo que lo toma del javascript iniciar(). aqui viene la consulta como hago para llamar a la funcion iniciar ya q el ajax solo dibuja la tabla y nada mas no llama a ninguna pagina adicional o como puedo darles un tamaño fijo a las columnas de los titulos de 50px o su equivalente en em, y dar ese mismo tamano a las celdasde la tabla contenido.

Soy nuevo en estos temas disculpe las molestias y el tiempo ocupado en esto.
Chauu

[furoya]

Bueno, el tema es muy viejo. En general no se fomenta la resurrección de temas, pero creo que es más porque quienes los levantan no siempre agregan algo útil.

Uno de los dramas de éstos ejemplos —menos el último— es que funcionan en quirks mode o modo compatible; si le pones doctype (y hay que ponerlo), se trulan.

No sé de AJAX, pero si no hay evento, la función no se dispara.

Lo de darle un ancho fijo ... supongo que con darle un ancho fijo a la imagen bastaría, la parte del código que habría que modificar para que ese ancho no lo maneje javascript sería

Código:

="<img style=\"height:0; width:50px;\" class=\"rellH\">

Debe haber otra forma de fijar los anchos. Yo no seguí buscando.


Honestamente, fui felicitado por estos ejemplos, pero el que realmente funciona es el último. Los demás son curiosidades.

Voy a intentar con alguna versión compatible con más navegadores y con doctype. Dame un par de semanas para probar si funciona.

P.D. : Mmmm. ¿y si AJAX manda como contenido de alguna caja una copia de la funcion de inicio o un escript de 'disparo'? ¿No se ejecutaría al aparecer?. Déjame probar también eso, al menos con javascript puro.

[furoya]

Bien, no hubo que esperar mucho. Aggiornar el ejemplo que mencionaste fue rápido, lo único que me dejó dudas fue un par de líneas que no recuerdo para qué estaban

Código:

var dif = 2;
...
if(document.all) dif=0;

y las mandé a '0'.

Más lo veo y más desprolijo me parece, pero bue, como dije, el que realmente funciona es el que escribe la tabla con cada desplazamiento.

Unas acotaciones antes de ver la nueva versión.
El ejemplo no está pensado para una tabla dinámica. La función que mide y rellena con imágenes para fijar los anchos lo hace al inicio, después de cargar el contenido de las celdas. Por eso es que no va a alcanzar cor repetir la función; seguramente habrá que reescribirla dependiendo del uso final que se le dé.
El problema son justamente las imágenes, aunque se me ocurre que si te envían información, desde el servidor se pueden agregar esas imágenes de relleno y te ahorras todas las medidas del lado cliente; por supuesto, si es que todas tus celdas tienen una medida fija. De otra forma, lo mejor sería reenviar todos los datos de la tabla (sin "rellenos espaciadores") y disparar nuevamente la función, como si fuera una tabla nueva, no cambiándole nada más que una o dos celdas.

Un detalle que no quiero que se me pase : no existe algo como "un tamaño ... de 50px o su equivalente en em". Una se comporta como una medida absoluta, y la otra se verá distinta en cada navegador.
Un cálculo a ojímetro sería darle 0.6em por cada caracter de la celda, poniendo por supuesto un límite de caracteres en el formulario. Por ejemplo, si no se pueden ingresar más de 10, el ancho de las celdas será de 6em. Y cada una tendrá white-space: nowrap; overflow: hidden; .

Lo de ejecutar la funcion lo estuve probando sólo con javascript, deberías consultar mejor en el foro de AJAX, porque lo que hice es una chanchada y no sé si funcionará. Al final del código vas a encontrar un botón que rellena un div con una imagen; ésta, se cargue o no, dispara la función. Habría que pulirlo un poco con un delay, y el onerror no anda muy bien en Opera. En fin, son ideas.
Allí vas a ver bien cuál es el problema de no "resetear" los rellenos de la tabla : se duplican y los anchos se desbandan.

Te dejo el código.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MOVER ENC. prueba 05</title>
<script type="text/javascript">

function alerta(){alert("wertyu")}

var anchoCelda , altoCelda , contCeldas , pasoH , pasoV ,celdas1 , celdas2 ;
var dif = 0; //2

function iniciar(){

document.getElementById("contenido").className = "";
celdas1 = document.getElementById("filRell").getElementsByTagName( "td" ).length;
celdas2 = document.getElementById("encFil").getElementsByTagName( "td" ).length;
//if(document.all) dif=0;

for (j=0; j < celdas1; j++){
var anchoEnc = 0;
var anchoTab = 0;

anchoEnc = document.getElementById( "encCol" ).getElementsByTagName( "td" ).item(j).offsetWidth;
anchoTab = document.getElementById( "filRell" ).getElementsByTagName( "td" ).item(j).offsetWidth;

anchoCelda = (anchoTab > anchoEnc) ?  document.getElementById("filRell").getElementsByTagName( "td" ).item(j).offsetWidth : document.getElementById("encCol").getElementsByTagName( "td" ).item(j).offsetWidth;

if(anchoCelda < 40) anchoCelda = 40; //ANCHO MÍNIMO DE CELDA px

contCeldas = document.getElementById( "filRell" ).getElementsByTagName( "td" ).item(j).innerHTML;
document.getElementById( "filRell" ).getElementsByTagName( "td" ).item(j).innerHTML = contCeldas+"<img style=\"height:0; width:"+anchoCelda+"px;\" class=\"rellH\">";

contCeldas = document.getElementById( "encCol" ).getElementsByTagName( "td" ).item(j).innerHTML;
document.getElementById( "encCol" ).getElementsByTagName( "td" ).item(j).innerHTML ="<img style=\"height:0; width:"+(anchoCelda-dif)+"px;\" class=\"rellH\"><br>"+contCeldas;
}


document.getElementById("contenido").className = "tabla";


for (i=0; i < celdas2; i++){
var altoEnc = 0;
var altoTab = 0;
altoEnc = document.getElementById( "encFil" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).offsetHeight;
altoTab = document.getElementById( "contenido" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).offsetHeight;

altoCelda = (altoTab > altoEnc)? document.getElementById( "contenido" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).offsetHeight : document.getElementById( "encFil" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).offsetHeight;

document.getElementById( "contenido" ).getElementsByTagName( "tr" ).item(i).getElementsByTagName( "td" ).item(0).style.height = altoCelda +"px";

document.getElementById( "encFil" ).getElementsByTagName( "td" ).item(i).style.height = altoCelda +"px";
}
}

function desplaza(){
pasoH = document.getElementById("contenedor").scrollLeft;
pasoV = document.getElementById("contenedor").scrollTop;
document.getElementById("contEncCol").scrollLeft = pasoH;
document.getElementById("contEncFil").scrollTop = pasoV;
}

onload = function(){setTimeout('iniciar()' ,500)};
</script>
<style type="text/css">
body{color:#fff; background-color:#000;}
#alfabetos{border-collapse:collapse; background-color:buttonface;}

#alfabetos td{font:12px "arial" "helvetica" "sans-serif"; 
border:1px solid; text-align:center; vertical-align:top; 
color:#000; }

html>body #contEncCol{overflow:hidden; background-color:#ccf; 
width:16em; /*ANCHO TABLA (FF3)*/}
* html #contEncCol{overflow:hidden; overflow-y:scroll; 
background:#ccf; width:16em; /*ANCHO TABLA (IE7)*/}

#contEncFil{overflow:hidden; overflow-x:scroll; 
background-color:#ccf; height:8em; /*ALTO TABLA (Opera9)*/}
html>body #contEncFil{overflow:-moz-scrollbars-horizontal; 
background:#ccf; height:8em; /*ALTO TABLA (FF3)*/}
* html #contEncFil{overflow:hidden; overflow-x:scroll; 
background-color:#ccf; height:8em; /*ALTO TABLA (IE7)*/}

#contEncCol , #contEncFil{scrollbar-face-color:buttonface; 
scrollbar-highlight-color:buttonface; 
scrollbar-shadow-color:buttonface; scrollbar-arrow-color:buttonface; 
scrollbar-track-color:buttonface; scrollbar-base-color:buttonface; 
scrollbar-3dlight-color:buttonface; 
scrollbar-darkshadow-color:buttonface; }

#contenedor{overflow:auto; width:16em; height:8em; /*ANCHO Y ALTO TABLA*/}

#encCol td{text-align:center; vertical-align:middle; 
border:1px solid;}
#encFil {width:100%;}
#encCol {height:100%}

#contenido{background:#fff;}

#contenido td{text-align:left; white-space:nowrap;}

.tabla td{border:1px solid;}

.rellH{ position:relative; top:0; z-index:-1; bor¬der:1px solid red;}
</style>
</head>

<body>
<h2>Tabla que desplaza encabezados con el contenido.</h2>

<table id="alfabetos">
<tr>
<td></td>
<td>
<div id="contEncCol">
 <table id="encCol">
 <tr>
 <td> A </td><td> B </td><td> C </td><td> D </td><td> E </td>
<td style="border-color:#ccf">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
 </tr>
 </table>
</div>
</td>
</tr>

<tr>
<td>
<div id="contEncFil">
 <table id="encFil">
 <tr><td>1</td></tr>
 <tr><td>2</td></tr>
 <tr><td>3</td></tr>
 <tr><td>4</td></tr>
 <tr><td>5</td></tr>
 <tr><td>6</td></tr>
 <tr><td><!-- FILA VACÍA --></td></tr>
 </table>
&nbsp;<br>&nbsp;</div>
</td>
<td>
<div id="contenedor" onscroll="desplaza()">
 <table id="contenido">
 <tr>
 <td> ñ</td><td> alfa</td><td> bravo</td><td> charly</td>
<td> delta</td>
 </tr>
 <tr>
 <td> ñ</td><td> eco</td><td> foxtrot</td><td> golf</td>
<td> hotel</td>
 </tr>
 <tr>
 <td> ñ</td><td> indio</td><td> julieta</td><td> kilo</td>
<td> lima</td>
 </tr>
 <tr>
 <td> ñ </td><td> mike</td><td> noviembre <br><i>un salto</i></td>
<td> oscar</td><td> papa</td>
 </tr>
 <tr>
 <td> ñ ñ</td><td> quebec</td><td> romeo</td><td> sierra</td>
<td> tango</td>
 </tr>
 <tr>
 <td> ñ </td><td> uniforme</td><td> victor</td><td> whisky</td>
<td> x-ray</td>
 </tr>
 <tr id="filRell">
 <td><!-- FILA VACÍA --></td><td> </td><td> </td><td> </td>
<td> </td>
 </tr>
 </table>
</div>
</td>
</tr>
</table>
<p>
<b>NOTAS : </b>
<ol type="1">
<li>El ancho mínimo de las celdas es de 40px.
<li>El ancho se calcula tomando el mayor valor entre la celda de 
encabezado y la de contenido en cada columna.
<li>El texto en las celdas no tiene salto de línea hasta un 
<tt>&lt;br></tt>. 
<li>Al estar calculado en <tt>em</tt>, cambiando la medida de 
fuente en la tabla principal, se ajustan las medidas interiores 
(excepto el ancho mínimo).

</ol>





<div id="prueba" style="border:2px solid red;">&nbsp;</div>
<button onclick = "document.getElementById('prueba').innerHTML = 
'<img src=\'http://www.forosdelweb.com/images/smilies/borracho.gif \' onload=\'iniciar()\' onerror=\'iniciar()\'> <span>imagen que dispara la función</span>';">
Insertar código en el div de prueba.</button>






</body>
</html> 

[nitsugario]

aquí les dejo un plugin JQuery que ayuda con esto: https://github.com/nitsugario/jQuery-Freeze-Table-Column-and-Rows

[xerifandtomas]

Esto es un tema antiguo, de 2005 para ser exactos, a llovido mucho desde entonces y todo ha evolucionado mucho. Supongo que el problema que se planteaba en su día ya deben de haberlo resuelto o abandonado, pues en 11 años...


Se agradece la intencion pero Intentamos no reabrir temas viejos.

[Rafael]

Solo una nota, estas cosas se hacen ahora con CSS, por supuesto se puede con JavaScript, pero ya el CSS lo puede hacer.