Enviado por Antonio el día 11 de abril de 2005
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> </td><td>Información 1</td><td>Información 2</td><td>Informació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>
Re: Cabeceras fijas en tabla con scroll
Foros de debate
Javascript
