Foros del Web » Creando para Internet » CSS »

Fijar fila superior de tabla

Estas en el tema de Fijar fila superior de tabla en el foro de CSS en Foros del Web. Hola maestros, lo que pretendo hacer es fijar la fila de títulos de mi tabla. Algo estilo de Excell. Sé que es un tema muy ...
  #1 (permalink)  
Antiguo 19/04/2012, 04:11
Avatar de gorka_arai  
Fecha de Ingreso: octubre-2005
Mensajes: 281
Antigüedad: 19 años, 1 mes
Puntos: 1
Información Fijar fila superior de tabla

Hola maestros,
lo que pretendo hacer es fijar la fila de títulos de mi tabla. Algo estilo de Excell. Sé que es un tema muy sobado, pero creedme que he hecho mil búsquedas y probado mil soluciones (Javascript, el plugin JQuery Chromatable) pero no he conseguido adaptar ninguno de esos ejemplos a mi caso particular.
Por eso les coloco mi código, para ver si me pueden guiar en mi caso concreto.

Por cierto, en el código puede que haya muchos restos de código residual que no tenga ninguna función. Eso es fruto de mis innumerables pruebas...

Este es el código de mi página ASP
Código:
<%@language="vbscript"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<title>Ofertas Anuales Proveedores</title>
	<!--<link rel="stylesheet" type="text/css" href="css/estilos.css" media="screen" />	-->
	<!--Uso el plugin JQuery Chromatable-->
	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<!--<script type="text/javascript" src="javascript/jquery.chromatable.js"></script>-->
	
	<script>
		$("#mitabla").chromatable({
 
		width: "900px",
		height: "400px",
		scrolling: "yes"
 
		});
	</script>
</head>
<body>
	<div id="pagewidth" >
		<div id="wrapper" class="clearfix">
			<div id="cabecera"> <h2>Cabecera</h2><p>Se recomienda una resolución de pantalla de al menos 1280 x 1024 p&iacute;xeles</p><br />
			</div>
			<div id="contenido"><h1>OFERTAS ANUALES PROVEEDORES</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
				<table id="mitabla">				   
					<thead>	
					    			
						<tr>
							<th>FAMILIA</th>
							<th>C&Oacute;DIGO</th>
							<th>DESCRIPCI&Oacute;N</th>
							<th>PREV. ANUAL</th>
							<th>PRECIO UNIT.</th>
							<th>UD. EMBAL.</th>
							<th>EMBAN.</th>
							<th>PLAZO</th>
							<th>FABRICANTE</th>
							<th>REF. FABRIC.</th>
							<th>OBSERVACIONES</th>
							<th>HOMOL.</th>
						</tr>
							
			      	</thead>				
				  	<tbody>				    	  				 
						<%
						Set fs=Server.CreateObject("Scripting.FileSystemObject")
						Set f=fs.OpenTextFile(Server.MapPath("./bd/cliente.csv"), 1)
						do while f.AtEndOfStream = false
                      		linea = f.ReadLine
                      		linea = split(linea, ";")
					  		Response.Write "<tr>"
					  		for i = 0	to ubound (linea) 
					  			Response.Write "<td><input type='text' name='" & i & "' value='" & linea(i) & "' /></td>"
					  		next
					  		Response.Write "</tr>"
                    	loop
						f.Close
						Set f=Nothing
						Set fs=Nothing
						%>
					</tbody>			    						
				</table> 
			</div>
		</div>
	</div>
</body>
</html>
Y este es el código de mi archivo CSS
Código:
@charset "UTF-8";
/* CSS Document */
/* ******************************************************************** */ 
/*                  Layout de la web                                    */
/* ******************************************************************** */
html, body{ 
 margin:0; 
 padding:0; 
 } 
 
#pagewidth{}

#cabecera{
 width:99%; 
 clear:both;
 position:relative;
 border: 1px dashed #660000;
  }
#contenido{}

/* ******************************************************************** */ 
/*                      Estilos del formulario                          */ 
/* ******************************************************************** */ 

#contenido table tr td input:focus {
  border: 2px solid #000;
  background: #F3F3F3;
}
 
 
/* ******************************************************************** */ 
/*                      Estilos de los inputs                           */ 
/* ******************************************************************** */  
/*Efecto al establecer el foco en un input*/
#contenido table tr td input:focus {
  border: 2px solid #FFFFFF;
  background: #F3F3F3;
}


/* ******************************************************************** */ 
/*                      Estilos de la tabla                             */ 
/* ******************************************************************** */ 
/*Efecto al pasar el ratón por encima*/
#contenido table tr:hover {
  background:#FDFAD5;
}

table {
  border: solid 1px #D5D5D5;
  border-collapse: collapse;
  width:100%; 
}

table td {
	border:1px solid #D5D5D5;
	font-size:12px;
	padding:7px 5px;
}

table th {
	background-color:#FF9933;
	border-right:1px solid #D5D5D5;
	font-size:13.5px;
	line-height:120%;
	font-weight:bold;
	padding:8px 5px;
	text-align:left;
}
.ui-resizable {
	position:relative;
}
.ui-resizable-handle {
	display:block;
	font-size:0.1px;
	position:absolute;
	z-index:99999;
}

.ui-resizable-s { 
	background:#EEEEEE url(../images/grippie.png) no-repeat scroll center 2px;
	border-top:1px solid #CCCCCC;
	bottom:-5px;
	cursor:s-resize;
	height:14px;
	left:0;width:100%; 
}

/* ******************************************************************** */ 
/*                      Estilos de la cabecera flotante                 */ 
/* ******************************************************************** */ 
.cabeceraflotante{
  width:900px;
}
.cabeceraflotante1{
  width:7000px;
}
Muchas gracias de antemano!!

Última edición por gorka_arai; 19/04/2012 a las 04:20
  #2 (permalink)  
Antiguo 19/04/2012, 07:28
 
Fecha de Ingreso: febrero-2012
Mensajes: 84
Antigüedad: 12 años, 9 meses
Puntos: 14
Respuesta: Fijar fila superior de tabla

No lo he probado, igual te vale
http://css-tricks.com/video-screenca...-highlighting/
  #3 (permalink)  
Antiguo 19/04/2012, 11:07
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Respuesta: Fijar fila superior de tabla

¿De dónde salió eso de mostrar código de programación en un video?
¿Y no se les ocurrió rotarlo 180° para que también haya que mirarlo de cabeza?



Bien, al asunto.

Te creo que hayas hecho mil búsquedas y probado mil soluciones, gorka_arai, porque te creo que no hayas conseguido adaptar ninguno de esos ejemplos. Lo más probable es que si quieres fijar filas o columnas debas hacer todo de nuevo. A menos que tengas mucha suerte y le aciertes a las primeras pruebas, te va a salir más barato que reformar lo ya hecho.

Lo que me cuesta creer es que no ande los de poner las barras al tbody dejando los encabezados afuera. Pero puede ser que los navegadores ya no lo acepten.

Hace mucho por acá también se trató el tema, le hice alguna actualización, pero después lo abandoné. Si no lo viste, te dejo el enlace por si te da una idea.

Inmovilizar Columnas y Filas

La solución de ese momento fue crear otra tabla para que quedase fija, y las celdas se igualaban con JS. Si ya estas usando javascript, la compatibilidad te puede dar trabajo, para que los escripts no se pisen.
  #4 (permalink)  
Antiguo 20/04/2012, 02:05
 
Fecha de Ingreso: febrero-2012
Mensajes: 84
Antigüedad: 12 años, 9 meses
Puntos: 14
Respuesta: Fijar fila superior de tabla

Cita:
Iniciado por furoya Ver Mensaje
¿De dónde salió eso de mostrar código de programación en un video?
¿Y no se les ocurrió rotarlo 180° para que también haya que mirarlo de cabeza?
Si hubieses seguido leyendo habrías visto que hay una demo online y el código descargable.
  #5 (permalink)  
Antiguo 20/04/2012, 09:03
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Respuesta: Fijar fila superior de tabla

¿De dónde salió eso de mostrar el código después del video?
¿Y no se les ocurrió ponerlo en la página, en vez de hacer que lo descarguemos?

Por supuesto que no lo bajé. Ya hacer un video no es serio; que te pongan código fuente en un archivo a descargar, menos.
Y la ventana para ver el source no me anda. Lo miré con Chrome y queda toda en negro.

No quise tampoco perder el tiempo abriendo la demo. Pero ya entendí que no es una tabla con el encabezado fijo. Es una página que tiene una tabla con el encabezado fixed, o una simulación, da lo mismo.

Algo parecido a esto :

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>HEADER FIJO.</title>
<style type="text/css">
body {font-family: "arial unicode ms", titus, quivira, symbola, sans-serif; position: relative; }
table {margin-bottom: 200%;}
td , th {width: 5em; background-color: yellow;  height: 1.5em; text-align: center; }
th {background-color: lime;  }
</style>
</head>
<body>
<h2>Tabla con encabezado <code>fixed</code>.</h2>

<table border=1 cellspacing=2 align=center><tr style="position: fixed; z-index: 1; margin-left: -2px; ">
<th> UNO</th><th> DOS</th><th> TRES</th><th> CUATRO</th>
</tr><tr>
<td> </td><td> </td><td> </td><td> </td>
</tr><tr><tr>
<td> 1</td><td> 2</td><td> 3</td><td> 4</td>
</tr><tr>
<td> ❶</td><td> ❶</td><td> ❸</td><td> ❹</td>
</tr><tr>
<td> Ⅰ</td><td> Ⅱ</td><td> Ⅲ</td><td> Ⅳ</td>
</tr><tr>
<td> ➀</td><td> ➁</td><td> ➁</td><td> ➃</td>
</tr>
</body>
</html>
Que está lleno de "errores" para revisar, pero como dije, no voy a perder el tiempo con algo que ya sé que se puede hacer. Lo dejo para mostrar un método fácil.

Etiquetas: contenido, fijar, fila, hover, html, superior, tabla, fondo
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 13:24.