Un ejemplo sería el tener una tabla de gran tamaño (tal y como se muestra en el siguiente ejemplo) y que necesitemos que la cabecera nunca se oculta al desplazarnos con el scroll.
| Columna 1 | Columna 2 | Columna 3 | Columna 4 | Columna 5 |
| Dato 1.1 | Dato 2.1 | Dato 3.1 | Dato 4.1 | Dato 5.1 |
| Dato 1.2 | Dato 2.2 | Dato 3.2 | Dato 4.2 | Dato 5.2 |
| Dato 1.3 | Dato 2.3 | Dato 3.3 | Dato 4.3 | Dato 5.3 |
| Dato 1.4 | Dato 2.4 | Dato 3.4 | Dato 4.4 | Dato 5.4 |
| Dato 1.5 | Dato 2.5 | Dato 3.5 | Dato 4.5 | Dato 5.5 |
| Dato 1.6 | Dato 2.6 | Dato 3.6 | Dato 4.6 | Dato 5.6 |
| Dato 1.7 | Dato 2.7 | Dato 3.7 | Dato 4.7 | Dato 5.7 |
En la tabla de ejemplo si nos desplazamos con el scroll vertical, se perderán las cabeceras de la tabla. Una solución para ello es colocar la cabecera en un div diferente, como se ve a continuación.
| Dato 1.1 | Dato 2.1 | Dato 3.1 | Dato 4.1 | Dato 5.1 |
| Dato 1.2 | Dato 2.2 | Dato 3.2 | Dato 4.2 | Dato 5.2 |
| Dato 1.3 | Dato 2.3 | Dato 3.3 | Dato 4.3 | Dato 5.3 |
| Dato 1.4 | Dato 2.4 | Dato 3.4 | Dato 4.4 | Dato 5.4 |
| Dato 1.5 | Dato 2.5 | Dato 3.5 | Dato 4.5 | Dato 5.5 |
| Dato 1.6 | Dato 2.6 | Dato 3.6 | Dato 4.6 | Dato 5.6 |
| Dato 1.7 | Dato 2.7 | Dato 3.7 | Dato 4.7 | Dato 5.7 |
Ahora no se perderán las cabeceras, sin embargo, si usamos el scroll horizontal, las cabeceras no coincidiran con las columnas. Para solucionar esto vamos a sincronizar mediante javascript el scroll en ambos contenedores. Veamos el código correspondiente.
<div id="cabeceraTabla" style="border: 1px solid; overflow: hidden; width: 600px;">
<table>
<!-- Aquí la cabecera de la tabla -->
</table>
</div>
<div id="valoresTabla" style="border: 1px solid; height: 100px; overflow: auto; width: 600px;">
<table>
<!-- Aquí los datos de la tabla -->
</table>
</div>
<script>
document.getElementById("valoresTabla").onscroll = function ()
{
try
{
document.getElementById('cabeceraTabla').scrollLeft = document.getElementById('valoresTabla').scrollLeft;
}
catch (ex){alert(ex);}
};
</script>
Se trata de asignar un nombre a cada uno de los contenedores (cabeceraTabla y valoresTabla), posteriormente lo que se está haciendo es asignar una función al evento de scroll, de modo que al modificar la posición del scroll se asigna esa misma posición al scroll de la cabecera.
Se puede hacer lo mismo con el scroll vertical en caso de que queramos que la primera columna no se oculte. En tal caso la propiedad del objeto que se modifica es scrollTop.
| Columna 1 | Columna 2 | Columna 3 | Columna 4 | Columna 5 |
| Dato 1.1 | Dato 2.1 | Dato 3.1 | Dato 4.1 | Dato 5.1 |
| Dato 1.2 | Dato 2.2 | Dato 3.2 | Dato 4.2 | Dato 5.2 |
| Dato 1.3 | Dato 2.3 | Dato 3.3 | Dato 4.3 | Dato 5.3 |
| Dato 1.4 | Dato 2.4 | Dato 3.4 | Dato 4.4 | Dato 5.4 |
| Dato 1.5 | Dato 2.5 | Dato 3.5 | Dato 4.5 | Dato 5.5 |
| Dato 1.6 | Dato 2.6 | Dato 3.6 | Dato 4.6 | Dato 5.6 |
| Dato 1.7 | Dato 2.7 | Dato 3.7 | Dato 4.7 | Dato 5.7 |
