Foros del Web - Ver Mensaje Individual

furoya · #13 (**permalink**) 12/05/2005, 18:08

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