Aportación: cabecera de tabla fija

mgusdl · #1 (**permalink**) 01/10/2008, 05:32

Buenas!
Hace mucho que, por temas de trabajo, necesito que la cabeza de una tabla se quede fija mientras que el contenido hace scroll.
En principio el estándar de HTML permite esto dándole propiedades overflow y altura a la etiqueta tbody, pero como todos sabemos, Micro$oft se pasa los estándares por el arco del triunfo.

Mi idea ha sido hacer 2 tablas dentros de 2 div, una con la cabecera y otra con el contenido; e igualar los anchos y sincronizar el scroll lateral.

Bueno, me he currado un codiguillo, mejorable. A ver que os parece. Lo he probado en IE7 y FF3 y funciona perfectamente en ambos.

Código javascript:

Ver originalfunction ajustaT(cuerpo, cabeza)
    {
    var cu = document.getElementById(cuerpo);
    var ca = document.getElementById(cabeza);
    if (ca.rows[0].cells.length != cu.rows[0].cells.length) { alert('Las tablas no coinciden en cantidad de celdas'); return; }
    var scrw = 14;
    ca.width = cu.offsetWidth + scrw;
    var newCell = ca.rows[0].insertCell(-1);
    newCell.innerHTML = '';
    newCell.width = scrw + 'px';
    cu.parentNode.onscroll = function () { ca.parentNode.scrollLeft = cu.parentNode.scrollLeft; }
    for (i=0; i<cu.rows[0].cells.length; i++) ca.rows[0].cells[i].width = cu.rows[0].cells[i].offsetWidth;  
    }
 
onload = function () { ajustaT('bdy', 'hdr'); }

El HTML quedaría así:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">
<head>
<title>Tabla</title>
<script type="text/javascript" src="funciones.js"></script>
<style type="text/css">
div.tcabeza, div.tcuerpo { width:200px; }
div.tcabeza { border:1px solid #AAA; overflow:hidden; }
div.tcabeza table tr { color:#FFF; background-color:#336; text-align:center; font-weight:bold; }
div.tcuerpo { background-color:#AAF; border:1px solid #AAA; overflow:auto; height:300px; }
div.tcuerpo table tr.f0 { background-color:#FFF; }
div.tcuerpo table tr.f1 { background-color:#E0F4FE; }
</style>
</head>
<body>

<div class="tcabeza">
	<table summary="cabeza" id="hdr">
		<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>
	</table>
</div>
<div class="tcuerpo">
	<table summary="cuerpo" id="bdy">
		<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>
		<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>

	</table>
</div>
</body>
</html>

mgusdl · #2 (**permalink**) 01/10/2008, 10:02

Tiene un pequeño fallo cuando la celdas de la cabecera son más anchas que las del cuerpo... Estoy en ello.

derkenuke · #3 (**permalink**) 01/10/2008, 15:10

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 { width: 600px;} 
td { padding: 5px; } 
#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(tabla, h) { 
         
    // 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.appendChild( miFila ); 
     
    // 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 t = tabla.cloneNode(true); 
    t.removeChild( t.getElementsByTagName("THEAD")[0] );            // quitamos el HEAD 
    var nuevoTbody = t.getElementsByTagName("tbody")[0]; 
    nuevoTbody.removeChild( nuevoTbody.lastChild ); 
    miDIV.appendChild( t ); 
 
    // Borro todas las filas del antiguo tbody excepto la mia 
    do { 
        elTbody.removeChild( elTbody.childNodes[0] ); 
    } while( elTbody.childNodes.length > 1 ); 
 
 
} 
 
window.onload = function() { 
    if( document.all ) 
        ajustaT( id("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.

buzu · #4 (**permalink**) 01/10/2008, 18:35

Interesante aporte, aun que el resultado final queda poco elegante. De cualquier modo no se me ocurre por el momento otra solución.