Hola a todos, pues nada, mi problema es que necesito bloquear el encabezado de dos tablas que tengo en una misma pagina, y despues de mucho buscar encontre como hacerlo para una tabla, mediante un pequeño script y una hoja de estilo, lo adapte a mi pagina y me funciono, pero me funciono solo para una de las tablas ya que para la otra, al mover el scroll de la primera me movia el encabezado de la segunda. y si movia el scroll de la segunda tabla se me movia toda la tabla y no me fijaba el encabezado de esta segunda.
Aqui os paso mi codigo, tanto del html como del css.
Código:
<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><LINK
href="Librerias/tabla.css" type=text/css rel=stylesheet>
<SCRIPT language=JavaScript type=text/javascript>
function tabdataInit() {
var tables = document.getElementsByTagName('table');
for (var t=0; t<tables.length; t++) {
if ('tabclass'==tables[t].className) {
var rows = document.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
rows[i].onmouseover = function() {
this.className += ' hilite';
}
rows[i].onmouseout = function() {
this.className = this.className.replace('hilite', '');
}
}
}
}
}
window.onload=tabdataInit;
</SCRIPT>
<META content="MSHTML 6.00.2900.2873" name=GENERATOR></HEAD>
<BODY>
<DIV id=tbl-container>
<TABLE class=tabclass id=tbl width="90%" border=1>
<THEAD>
<TR>
<TH class=primera_col scope=col><A
href="">Columna1.</A></TH>
<TH><A
href="">Columna2</A></TH>
<TH scope=col><A
href="">Columna3</A></TH>
<TH scope=col><A
href="">Columna4</A></TH>
<TH scope=col><A
href="">Columna5</A></TH>
<TH scope=col><A
href="">Columa6</A></TH>
<TH scope=col><A
href="">Columna7</A></TH>
<TH scope=col><A
href="">Columna8</A></TH>
<TH scope=col><A
href="">Columna9</A></TH>
<TH scope=col>Columna10</TH>
<TH scope=col>Columna11</TH></TR></THEAD>
<TBODY>
<TR>
<TD>Dato1</TD>
<TD>Dato2</TD>
<TD>Dato3</TD>
<TD><A
href="">Dato4</A></TD>
<TD>Dato5</TD>
<TD>Dto6</TD>
<TD>Dato7</TD>
<TD>Dato8</TD>
<TD>Dato9</TD>
<TD>Dato10</TD>
<TD><A
href="">Dato11</A></TD></TR>
<TBODY>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR class=totales>
<TD colSpan=7>Totales</TD>
<TD>Total1</TD>
<TD>Total2</TD>
<TD>Total2</TD>
<TD> </TD></TR></TBODY></TABLE>
</DIV>
<DIV id=tbl-container>
<TABLE class=tabclass id=tbl width="90%" border=1>
<THEAD>
<TR>
<TH class=primera_col scope=col><A
href="">Columna1.</A></TH>
<TH><A
href="">Columna2</A></TH>
<TH scope=col><A
href="">Columna3</A></TH>
<TH scope=col><A
href="">Columna4</A></TH>
<TH scope=col><A
href="">Columna5</A></TH>
<TH scope=col><A
href="">Columa6</A></TH>
<TH scope=col><A
href="">Columna7</A></TH>
<TH scope=col><A
href="">Columna8</A></TH>
<TH scope=col><A
href="">Columna9</A></TH>
<TH scope=col>Columna10</TH>
<TH scope=col>Columna11</TH></TR></THEAD>
<TBODY>
<TR>
<TD>Dato1</TD>
<TD>Dato2</TD>
<TD>Dato3</TD>
<TD><A
href="">Dato4</A></TD>
<TD>Dato5</TD>
<TD>Dto6</TD>
<TD>Dato7</TD>
<TD>Dato8</TD>
<TD>Dato9</TD>
<TD>Dato10</TD>
<TD><A
href="">Dato11</A></TD></TR>
<TBODY>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR class=totales>
<TD colSpan=7>Totales</TD>
<TD>Total1</TD>
<TD>Total2</TD>
<TD>Total2</TD>
<TD> </TD></TR></TBODY></TABLE>
</DIV>
</BODY>
</HTML>
hoja de estilo.css
Código:
DIV#tbl-container {
MARGIN-TOP: 10px; OVERFLOW: auto; WIDTH: 100%; SCROLLBAR-BASE-COLOR: #eeeeee; HEIGHT: 252px
}
#tbl {
BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BORDER-BOTTOM: #cccccc 1px solid; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #ffffff
}
DIV#tbl-container TABLE TH {
WHITE-SPACE: nowrap
}
#tbl TD {
BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 6px; PADDING-LEFT: 12px; FONT-SIZE: 13px; PADDING-BOTTOM: 6px; COLOR: #333333; PADDING-TOP: 6px; BORDER-BOTTOM: #cccccc 1px solid; WHITE-SPACE: nowrap
}
#tbl TD A:link {
COLOR: #333333; TEXT-DECORATION: none
}
#tbl TD A:visited {
COLOR: #333333; TEXT-DECORATION: none
}
#tbl TD A:hover {
TEXT-DECORATION: underline
}
THEAD TH {
BORDER-RIGHT: #ebebeb 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #ebebeb 1px solid; PADDING-LEFT: 12px; FONT-WEIGHT: normal; FONT-SIZE: 14px; BACKGROUND: #dedede no-repeat; PADDING-BOTTOM: 6px; CURSOR: default; COLOR: #666666; PADDING-TOP: 6px; BORDER-BOTTOM: #ebebeb 1px solid; POSITION: relative; TEXT-ALIGN: center
}
THEAD TH.locked {
BORDER-RIGHT: #ebebeb 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #ebebeb 1px solid; PADDING-LEFT: 12px; FONT-WEIGHT: normal; FONT-SIZE: 14px; BACKGROUND: #dedede no-repeat; PADDING-BOTTOM: 6px; CURSOR: default; COLOR: #666666; PADDING-TOP: 6px; BORDER-BOTTOM: #ebebeb 1px solid; POSITION: relative; TEXT-ALIGN: center
}
THEAD TH {
Z-INDEX: 20; ; TOP: expression(document.getElementById("tbl-container").scrollTop-2)
}
THEAD TH A {
COLOR: #666666; TEXT-DECORATION: none
}
BODY {
FONT-FAMILY: tahoma
}
#tbl TR:hover {
BACKGROUND-COLOR: #c3d4ff
}
.tabclass TR:hover {
BACKGROUND-COLOR: #c3d4ff
}
.tabclass TR.hilite {
BACKGROUND-COLOR: #c3d4ff
}
.totales {
BACKGROUND-COLOR: #eeeeee
}
Creo que el problema viene de la hoja de estilo pero no se como solventarlo, ya que soy nuevo con respecto a las hojas de estilo.
Agradeceria cualquier aporte que me pudierais dar.
Un saludo.