Ver Mensaje Individual
  #3 (permalink)  
Antiguo 01/10/2008, 15:10
Avatar de derkenuke
derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 7 meses
Puntos: 45
Respuesta: Aportación: cabecera de tabla fija

Hola mgusdl:

El aporte es interesante, pero ten en cuenta que la técnica sería tener un tabla HTML normal y corriente, y aplicar el script que nos haga falta. Si cambiamos la estructura HTML de poco nos servirá el script. Algo así, pero habría que mejorar un poco el estilo:

Código PHP:
<!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" xml:lang="es" lang="es">
<
head>
<
meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<
meta name="Author" content="derkeNuke" />
<
title>Página nueva</title>
<
style type="text/css">
table width600px;}
td padding5px; }
#tabla tbody { height: 300px; overflow-y: scroll; overflow-x: hidden; }
#tabla tbody tr { height: 40px; }
</style>
</
head>

<
body>



<
table id="tabla" border="1">
    <
thead>
        <
tr>
            <
th>c1</th>
            <
th>c2</th>
            <
th>c3</th>
            <
th>c4</th>
            <
th>c5</th>
            <
th>c6</th>
            <
th>c7</th>
            <
th>c8</th>
        </
tr>
    </
thead>
    <
tbody>
        <
tr class="f0">
            <
td>asdfa</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f1">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f0">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f1">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f0">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f1">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f0">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f1">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f0">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f1">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f0">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f1">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f0">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f1">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f0">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f1">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f0">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f1">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f0">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f1">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
        <
tr class="f0">
            <
td>asdf</td>
            <
td>ghjkl</td>
            <
td>qwerty</td>
            <
td>uiop</td>
            <
td>zxcv</td>
            <
td>vbnm</td>
            <
td>12345</td>
            <
td>67890</td>
        </
tr>
    </
tbody>
</
table>




<
script type="text/javascript">
<!--



// document.getElementById abreviado
function id(x) { return document.getElementById(x); }


function 
ajustaT(tablah) {
        
    
// Añado una fila que contendrá una celda que contendrá DIV que contendrá una copia del Tbody
    
var miFila document.createElement("TR");
    var 
miCelda document.createElement("TD");
    
miFila.appendChild(miCelda);
    
miCelda.style.padding "0";
    var 
elTbody tabla.getElementsByTagName("tbody")[0];
    
miCelda.colSpan elTbody.getElementsByTagName("TR")[0].getElementsByTagName("TD").length+1;
    
elTbody.appendChildmiFila );
    
    
// Añado el DIV a la celda que contendrá una copia del Tbody
    
var miDIV document.createElement("DIV");
    
miCelda.appendChild(miDIV);
    
miDIV.style.width "100%";
    
miDIV.style.height h+"px";
    
miDIV.style.overflowY "scroll"miDIV.style.overflowX "hidden";
    var 
tabla.cloneNode(true);
    
t.removeChildt.getElementsByTagName("THEAD")[0] );            // quitamos el HEAD
    
var nuevoTbody t.getElementsByTagName("tbody")[0];
    
nuevoTbody.removeChildnuevoTbody.lastChild );
    
miDIV.appendChild);

    
// Borro todas las filas del antiguo tbody excepto la mia
    
do {
        
elTbody.removeChildelTbody.childNodes[0] );
    } while( 
elTbody.childNodes.length );


}

window.onload = function() {
    if( 
document.all )
        
ajustaTid("tabla"), 300 );
}



// -->
</script>

</body>
</html> 
Tampoco está nada bien la condicional document.all, es sólo un ejemplo. Habría que buscar algo mejor. También podríamos implementar tu solución de separar en dos DIVs haciéndolo con javascript, ningún problema.


Saludos.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.