Cabeceras fijas en tabla con scroll

Antonio
25 de Junio del 2008
Hola listeros, aquí os pongo un ejemplo de como poner una tabla con cabecera fija y que haga scroll el resto de esta tabla. Además, he agregado un botón para que al imprimir la tabla, esta salga con su tamaño. Os será muy útil para scroll en grandes tablas.
----------------------
<html>
<head>
<script>
function meteDiv(){
var tbs = document.getElementsByTagName("TABLE");
var tb1;
for(i=0;i<tbs.length;i++){
if(tbs[i].name=="TABLE_1"){
tb1 = tbs[i];
break;
}
}
var mydiv = document.createElement("DIV");
mydiv.setAttribute("id","bigdiv");
var mysubdiv = document.createElement("DIV");
mysubdiv.setAttribute("id","litdiv");
var trs = tb1.getElementsByTagName("TR");
var tds = trs[0].getElementsByTagName("TD");
var anchos = new Array(tds.length);
for(i=0;i<tds.length;i++) anchos[i]=tds[i].clientWidth;

mydiv.style.background="#ebebeb";
mydiv.style.height="200";

mysubdiv.style.width="350";
mysubdiv.style.height="185";
mysubdiv.style.overflow="auto";


var firstTR = tb1.firstChild.firstChild; //.cloneNode(true);
var newTB = document.createElement("TABLE");
var newTBODY = document.createElement("TBODY");
newTBODY.appendChild(firstTR);
newTB.appendChild(newTBODY);
newTB.setAttribute("border","1");
newTB.style.borderCollapse="collapse";

var tds1 = tb1.getElementsByTagName("TD");
var tds2 = newTB.getElementsByTagName("TD");
for(i=0;i<tds2.length;i++){
tds2[i].style.width=anchos[i];
tds2[i].width=anchos[i];
tds1[i].style.width=anchos[i];
tds1[i].width=anchos[i];
}

mydiv.appendChild(newTB);

mydiv.style.width=tb1.clientWidth+18;
mysubdiv.style.width=tb1.clientWidth+18;
tb1.style.background="#EEEEEE";

mysubdiv.appendChild(tb1);
mydiv.appendChild(mysubdiv);

document.body.replaceChild(mydiv,document.body.firstChild);
window.status='acabo';
window.event.srcElement.onclick=function(){ return false; }
}

function preparaImpresion(){
var mydiv = document.getElementById("bigdiv");
var tbs = mydiv.getElementsByTagName("table");
var alto = 0;
var altoTB1 = 0;

for(i=0;i<tbs.length;i++){
if( tbs[i].clientHeight ){
alto += tbs[i].clientHeight;
if( tbs[i].name=="TABLE_1" ){
altoTB1=tbs[i].clientHeight;
}
}
}

mydiv.height=alto;
mydiv.style.height=alto;
document.getElementById("litdiv").height=altoTB1;
document.getElementById("litdiv").style.height=altoTB1+2; //2 pixeles de bordes

}
</script>
</head>
<body>
<table name="TABLE_1" border="1" style="border-collapse:collapse">
<tr><td>&nbsp;</td><td>Informaci&oacute;n 1</td><td>Informaci&oacute;n 2</td><td>Informaci&oacute;n 3</td></tr>
<tr><td>Enero</td><td>12341</td><td>1234132</td><td>34,23</td></tr>
<tr><td>Febrero</td><td>12341</td><td>1234132</td><td>34,23</td></tr>
<tr><td>Marzo</td><td>12341</td><td>1234132</td><td>34,23</td></tr>
<tr><td>Abril</td><td>12341</td><td>1234132</td><td>34,23</td></tr>
<tr><td>Mayo</td><td>12341</td><td>1234132</td><td>34,23</td></tr>
<tr><td>Junio</td><td>12341</td><td>1234132</td><td>34,23</td></tr>
<tr><td>Julio</td><td>12341</td><td>1234132</td><td>34,23</td></tr>
<tr><td>Agosto</td><td>12341</td><td>1234132</td><td>34,23</td></tr>
<tr><td>Septiembre</td><td>12341</td><td>1234132</td><td>34,23</td></tr>
<tr><td>Octubre</td><td>12341</td><td>1234132</td><td>34,23</td></tr>
<tr><td>Noviembre</td><td>12341</td><td>1234132</td><td>34,23</td></tr>
<tr><td>Diciembre</td><td>12341</td><td>1234132</td><td>34,23</td></tr>
</table>
<br><br>
<input type="button" value="Mete Scroll" onclick="meteDiv()"><BR>
<input type="button" value="Para Imprimir" onclick="preparaImpresion()">
</body>
</html>

wjama
25 de Junio del 2008
Un ejemplo de como fijar la primera fila de una tabla con jQuery http://wjama.blogspot.com/2008/04/plugin-fijar-cabecera-de-una-tabla-en.html