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.