Foros del Web » Creando para Internet » CSS »

Fijar encabezado en dos tablas de una misma pagina

Estas en el tema de Fijar encabezado en dos tablas de una misma pagina en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/04/2008, 07:02
 
Fecha de Ingreso: febrero-2008
Mensajes: 9
Antigüedad: 9 años, 9 meses
Puntos: 0
Fijar encabezado en dos tablas de una misma pagina

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.
  #2 (permalink)  
Antiguo 02/04/2008, 13:33
Avatar de Myakire
Colaborador
 
Fecha de Ingreso: enero-2002
Ubicación: Centro de la república
Mensajes: 8.849
Antigüedad: 15 años, 10 meses
Puntos: 145
Re: Fijar encabezado en dos tablas de una misma pagina

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
  #3 (permalink)  
Antiguo 03/04/2008, 02:05
 
Fecha de Ingreso: febrero-2008
Mensajes: 9
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Fijar encabezado en dos tablas de una misma pagina

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.
  #4 (permalink)  
Antiguo 11/05/2009, 12:11
 
Fecha de Ingreso: enero-2009
Mensajes: 172
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Fijar encabezado en dos tablas de una misma pagina

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:52.