Hola
IsaBelM.
Qué mala costumbre tienes de resucitar ejemplos viejos para corregirlos.
Iba a hacer un paralelismo con el Dr. Victor Frankenstein, pero ahora que nos llevamos un poco mejor, no lo quiero arruinar y me lo guardo.
Vi el desplazamiento espasmódico que mencionaste. Y vi algún otro detalle, también.
No quiero volver a estudiar esos códigos porque me asusto. Que hayan sido muy
populares en la web no significa que no fuesen un engendro para salir del apuro. Si aún circulan es porque asumieron la categoría de "código zombie", y los siguen usando a pesar de su obsolescencia. En aquellos años no teníamos los recursos de diseño que existen ahora.
Es cierto que el fijado de cabeceras se puede hacer medianamente fácil (y no te estoy quitando mérito para nada, al contrario, amo cuando le dan vueltas y más vueltas a un escript hasta exprimirle la última gota de sangre), pero si la memoria no me falla, en aquel tiempo la idea era simular el comportamiento de las tablas de planilla de cálculo. Y allí es donde aparecían los problemas.
Uno era fijar la celda superior izquierda, con el alto de su fila y el ancho de su columna.
Pongo una versión de tu código para que se entienda mejor.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#table-scroll {
width: 500px;
height: 100px;
overflow: auto;
}
table, td, th {
border: rgba(193, 193, 193, 0.48) 1px solid;
}
#fixedY{
position: relative;
top: 0;
z-index: 99;
background-color: red;
}
#fixedY table{
border-collapse: collapse;
width: 900px;
}
#fixedY table th, #fixedY table td {
width: 25%;
}
#fixedY table th {
background-color: red;
font: bold 15px Tahoma, Geneva, sans-serif;
color: rgb(255, 255, 255);
}
#cuerpoDatos {
width: 900px;
overflow: hidden;
}
#cuerpoDatos > div{
float: left;
}
#cuerpoDatos > div#fixedX{
width: 25%;
position: relative;
left: 0;
z-index: 98;
background-color: yellow;
}
#cuerpoDatos > div#fixedX table{
border-collapse: collapse;
width: 100%;
}
#cuerpoDatos > div#nofixedX{
width: 75%;
}
#cuerpoDatos > div#nofixedX table{
border-collapse: collapse;
width: 100%;
}
#cuerpoDatos > div#nofixedX table td {
width: 33%;
}
#corner{
font: bold 15px/120% Tahoma, Geneva, sans-serif;
text-align: center;
border: orange 2px solid;
background-color: orange;
position: fixed;
top: default;
margin-top: -1.5em;
z-index: 2147483647;
}
</style>
<script type="text/javascript">
function fnc() {
document.getElementById('table-scroll').onscroll = function() {
document.getElementById('fixedY').style.top = document.getElementById('table-scroll').scrollTop + 'px';
document.getElementById('fixedX').style.left = document.getElementById('table-scroll').scrollLeft + 'px';
};
document.getElementById('corner').style.width = document.getElementById('fixedX').offsetWidth -4 + "px";
}
window.onload = fnc;
</script>
</head>
<body>
<div id="table-scroll">
<div id="fixedY">
<table>
<thead>
<tr>
<th>Lote</th><th>Producto 1</th><th>Producto 2</th><th>Producto 3</th>
</tr>
</thead>
</table>
</div>
<div id="cuerpoDatos">
<div id="corner"> ☺ </div>
<div id="fixedX">
<table>
<tbody>
<tr>
<td>Viaje 1</td>
</tr>
<tr>
<td>Viaje 2</td>
</tr>
<tr>
<td>Viaje 3</td>
</tr>
<tr>
<td>Viaje 4</td>
</tr>
<tr>
<td>Viaje 5</td>
</tr>
<tr>
<td>Viaje 6</td>
</tr>
<tr>
<td>Viaje 7</td>
</tr>
<tr>
<td>Viaje 8</td>
</tr>
<tr>
<td>Viaje 9</td>
</tr>
</tbody>
</table>
</div>
<div id="nofixedX">
<table>
<tbody>
<tr>
<td>moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td>moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td>moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td>moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td>moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td>moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td>moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td>moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td>moto</td><td>avión</td><td>barco</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Aquí es fácil anclar la celda, porque está tiesa para cualquier movimiento.
Si se fijan como cabecera de filas
o columnas, tampoco es tan difícil, pero clavar las cabezas de filas
y también de columnas, ya se complica. Usando
fixed una de las dos va a terminar decapitada por el scroll.
Otro inconveniente que estamos disimulando es el ajuste de tamaño de cada celda. En una tabla real es automático, y tiene que ver con el tamaño del contenido.
Si usamos clones de los anchos de cada celda de la fila para la cabecera superior, y de las alturas de cada celda de la columna para la cabecera izquierda, ya hay que darles una medida fija para todas; o encadenarlas con JS, cada una con su "hermana".
Si por culpa de los contenidos una columna tiene un ancho, y su cabecera falsa termina con otro, la continuidad del tamaño deja de ser un clon y pasa a ser el gemelo maldito.
Claro que eso de darles un tamaño fijo obliga a ser generosos con las medidas, para que el contenido no quede apretado o mutilado. Si no usamos javascript, quedamos entre la Espada y la Pared, o entre la Cruz y el Agua Bendita, o entre la Dama de Clavos y el Lecho de Procusto.
Si bien el escript de desplazamiento se puede optimizar para que los bloques se deslicen suave como una navaja bien afilada, esa sería la menor de las complicaciones. El resto de los ajustes requieren algo más de 2 líneas de JS.
Y no estás haciendo más que tirarme cadáveres que ya dejé en el sótano hace mucho tiempo. Si los señalo en algún post, es sólo para que los novatos los diseccionen y vean cómo se resolvió un problema en algún momento. Tampoco para que copien y peguen. Porque reconozcamos que en la mayoría de los casos más que una disección es una autopsia.
Tampoco quiero que pienses que me molesta que revuelvas mi pasado. Al contrario, es un honor si destripas y reconstruyes mis códigos a tu gusto. Pero diviértete sola; a mí no me persigas con estos viejos fantasmas que ya no sé cómo manejar. Tú tendrás un don natural para interpretarlos, pero yo tengo que ponerme con mi única neurona operativa a desanudar la construcción de algo que hice cuando mi mente estaba (aunque sea un poco) más fresca.
Cada vez que me veo obligado por las circunstancias a repasar o recontruir uno de esos códigos, termino desnudo aullándole a la Lu...
¡No! ¡Ahí me fui al c*****o! ¡A partir de mañana me dedico a escribir el horóscopo de las revistas de adolescentes y le dejo el macabrismo a los que saben!
¡Qué tanto...!
P.D. : "
2 simples líneas" ... cómo te quiero. ¦-\
así que me plateé como simular la posición fija. y la solución resultó mucho mas sencilla de lo que pensaba. se trata de posicionar los bloques relativamente y con javascript modificar su top o left. lo que implica 2 simples líneas de código javscript
