Fijar encabezado en dos tablas de una misma pagina

nfpinero · #1 (**permalink**) 02/04/2008, 06:02

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>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD></TR> 
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD></TR>
  <TR class=totales>
    <TD colSpan=7>Totales</TD>
    <TD>Total1</TD>
    <TD>Total2</TD>
    <TD>Total2</TD>
    <TD>&nbsp;</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>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD></TR>
 
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD></TR>
  <TR class=totales>
    <TD colSpan=7>Totales</TD>
    <TD>Total1</TD>
    <TD>Total2</TD>
    <TD>Total2</TD>
    <TD>&nbsp;</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.

Myakire · #2 (**permalink**) 02/04/2008, 12:33

Lo que pasa es que solo copiaste el código de la primera tabla dos veces, entonces tienes dos elementos ID llamados tbl y tbl-container y como el estilo del TOP depende del scrollTop del ID tbl-container por eso se mueve.

Debes a juicio mio, nombrar de forma diferente los objetos de cada tabla y definir un estilo THEAD TH para cada objeto, no se un #tbl2 THEAD TH y un #tbl2 THEAD TH cada uno con el TOP al ScrollTop que le corresponda.

Saludos

nfpinero · #3 (**permalink**) 03/04/2008, 01:05

Duplique y renombre como me comentaste, pero aplicandolo a todo el css, con diferentes id's y clases, y ahora si que me funciona, tengo que darte las gracias Myakire, dejo el codigo del css por si a alguien le pudiera venir bien.

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-container2 {
	MARGIN-TOP: 10px; OVERFLOW: auto; WIDTH: 100%; SCROLLBAR-BASE-COLOR: #eeeeee; HEIGHT: 252px
}
#tbl2 {
	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
}
DIV#tbl-container2 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
}
#tbl2 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
}
#tbl2 TD A:link {
	COLOR: #333333; TEXT-DECORATION: none
}
#tbl2 TD A:visited {
	COLOR: #333333; TEXT-DECORATION: none
}
#tbl2 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
}
#tbl THEAD TH {
	Z-INDEX: 20; ; TOP: expression(document.getElementById("tbl-container").scrollTop-2)
}
#tbl THEAD TH A {
	COLOR: #666666; TEXT-DECORATION: none
}
#tbl2 THEAD TH {
	Z-INDEX: 20; ; TOP: expression(document.getElementById("tbl-container2").scrollTop-2)
}
#tbl2 THEAD TH A {
	COLOR: #666666; TEXT-DECORATION: none
}
BODY {
	FONT-FAMILY: tahoma
}
#tbl TR:hover {
	BACKGROUND-COLOR: #c3d4ff
}
#tbl2 TR:hover {
	BACKGROUND-COLOR: #c3d4ff
}
.tabclass TR:hover {
	BACKGROUND-COLOR: #c3d4ff
}
.tabclass TR.hilite {
	BACKGROUND-COLOR: #c3d4ff
}
.tabclass2 TR:hover {
	BACKGROUND-COLOR: #c3d4ff
}
.tabclass2 TR.hilite {
	BACKGROUND-COLOR: #c3d4ff
}
.totales {
	BACKGROUND-COLOR: #eeeeee
}

Un saludo y Muchas gracias.

sesebas · #4 (**permalink**) 11/05/2009, 11:11

Hola amigos...

Estoy tratando de resolver un problema similar y me encontré con este post que talvez me podría ayudar. Mi primer problema al trabajar con este código es que no consigo fijar los encabezados en Firefox.

Me prodrían ayudar dándome una idea de como hacer que funcione en FF?

Gracias.