Ver Mensaje Individual
  #1 (permalink)  
Antiguo 01/10/2008, 05:32
Avatar de mgusdl
mgusdl
 
Fecha de Ingreso: abril-2007
Ubicación: Malaga, España
Mensajes: 190
Antigüedad: 17 años, 1 mes
Puntos: 5
Aportación: cabecera de tabla fija

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 original
  1. function ajustaT(cuerpo, cabeza)
  2.     {
  3.     var cu = document.getElementById(cuerpo);
  4.     var ca = document.getElementById(cabeza);
  5.     if (ca.rows[0].cells.length != cu.rows[0].cells.length) { alert('Las tablas no coinciden en cantidad de celdas'); return; }
  6.     var scrw = 14;
  7.     ca.width = cu.offsetWidth + scrw;
  8.     var newCell = ca.rows[0].insertCell(-1);
  9.     newCell.innerHTML = '';
  10.     newCell.width = scrw + 'px';
  11.     cu.parentNode.onscroll = function () { ca.parentNode.scrollLeft = cu.parentNode.scrollLeft; }
  12.     for (i=0; i<cu.rows[0].cells.length; i++) ca.rows[0].cells[i].width = cu.rows[0].cells[i].offsetWidth; 
  13.     }
  14.  
  15. 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> 

Última edición por mgusdl; 10/06/2009 a las 01:24