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>