Me gustaría poder "ajustar" la presentación de una tabla HTML'para añadir una única característica: cuando se desplaza hacia abajo a través de la página de modo que la tabla está en la pantalla, pero las filas de encabezado están fuera de la pantalla, me gustaría que los encabezados permanecen visibles en la parte superior del área de visualización.
Esto sería conceptualmente como la función "congelar paneles" de Excel. Sin embargo, una página HTML puede contener varias tablas y sólo me gustaría que ocurriera para la tabla que está actualmente en la vista, sólo mientras está en la vista.
Nota: He visto una solución en la que el área de datos de la tabla se hace desplazable mientras que los encabezados no se desplazan. Esa no es la solución que busco.
Me he encontrado con este problema hace muy poco. Por desgracia, tuve que hacer 2 tablas, una para el encabezado y otra para el cuerpo. Probablemente no es el mejor enfoque, pero aquí va:
<html>
<head>
<title>oh hai</title>
</head>
<body>
<table id="tableHeader">
<tr>
<th style="width:100px; background-color:#CCCCCC">col header</th>
<th style="width:100px; background-color:#CCCCCC">col header</th>
</tr>
</table>
<div style="height:50px; overflow:auto; width:250px">
<table>
<tr>
<td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
<td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
</tr>
<tr>
<td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
<td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
</tr>
</table>
</div>
</body>
</html>
Esto funcionó para mí, it's probablemente no la manera elegante pero funciona. I'll investigar para ver si puedo hacer algo mejor, pero permite múltiples tablas.
Ve a leer sobre la propiedad overflow para ver si se ajusta a tu necesidad
Si usas una tabla a pantalla completa quizás te interese ponerle a th display:fixed; y top:0; o intentar un enfoque muy similar vía css.
Actualización
Construya rápidamente una solución que funcione con iframes (html4.0). Este ejemplo NO ES estándar, sin embargo usted podrá arreglarlo fácilmente:
outer.html
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Outer</title>
<body>
<iframe src="test.html" width="200" height="100"></iframe>
</body>
</html>
test.html
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Floating</title>
<style type="text/css">
.content{
position:relative;
}
thead{
background-color:red;
position:fixed;
top:0;
}
</style>
<body>
<div class="content">
<table>
<thead>
<tr class="top"><td>Title</td></tr>
</head>
<tbody>
<tr><td>a</td></tr>
<tr><td>b</td></tr>
<tr><td>c</td></tr>
<tr><td>d</td></tr>
<tr><td>e</td></tr>
<tr><td>e</td></tr>
<tr><td>e</td></tr>
<tr><td>e</td></tr>
<tr><td>e</td></tr>
<tr><td>e</td></tr>
</tbody>
</table>
</div>
</body>
</html>
Usar display: fixed
en la sección thead
debería funcionar, pero para que sólo funcione en la tabla actual, necesitarás la ayuda de JavaScript. Y será complicado porque tendrá que averiguar los lugares de desplazamiento y la ubicación de los elementos en relación con la ventana gráfica, que es una de las principales áreas de incompatibilidad del navegador.
Echa un vistazo a los frameworks de JavaScript populares (jQuery, MooTools, YUI, etc etc) para ver si pueden hacer lo que quieres o hacer más fácil hacer lo que quieres.