Foros del Web » Creando para Internet » HTML »

tabla con primera fila fija ?

Estas en el tema de tabla con primera fila fija ? en el foro de HTML en Foros del Web. buenas, tengo que mostrar datos en una tabla, pero los títulos (primera fila) quiero que permanezcan siempre visibles. De momento la solución que he encontrado ...
  #1 (permalink)  
Antiguo 11/01/2006, 16:24
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
tabla con primera fila fija ?

buenas,

tengo que mostrar datos en una tabla, pero los títulos (primera fila) quiero que permanezcan siempre visibles.

De momento la solución que he encontrado es en la página principal poner una tabla con sólo los encabezados, y en un IFRAME justo debajo la tabla con los datos.

El problema es que dependiendo del navegador se ajusta o descoloca, me gustaría saber si hay alguna forma mejor.

Gracias.
  #2 (permalink)  
Antiguo 12/01/2006, 05:48
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Tabla con barras de desplazamiento

Hola

Bueno, creo que esto te puede ayudar.

He usado dos tablas aunque el usuario no notaría dicho efecto y algunos detalles para que se note bien lo que he hecho, solo has de ajustar el código a tus necesidades.

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="language" content="ES" />
	<meta http-equiv="Content-Language" content="es" />
	<meta name="Author" content="PatomaS" />
	<title>Montar una tabla con barras de desplazamiento</title>
	<style type="text/css">
	* {
		padding: 0px;
		margin: 0px;
		border: 0px;
	}
	.Base {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 99%;
	}
	.CapaCabecera {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 250px;
		border: 1px solid #00ff00;
	}
	.TablaCabecera {
		width: 100%;
	}
	.CapaContenido {
		position: absolute;
		top: 25px;
		left: 0px;
		width: 250px;
		height: 100px;
		overflow: auto;
		border: 1px solid #000000;
	}
	td {
		width: 100px;
		text-align: center;
	}
	.TablaContenido {
		width: 200px;
		table-layout: fixed;
		boder-collapse: collapse;
	}
</style>
</head>
<body>
<div class="Base">
	<div class="CapaCabecera">
		<table class="TablaCabecera">
			<col width="100px" /><col width="100px" />
			<tr>
				<th>Título 1</th><th>Título 2</th>
			</tr>
		</table>
	</div>
	<div class="CapaContenido">
		<table class="TablaContenido">
			<col width="100px" /><col width="100px" />
			<tr>
				<td>Texto</td><td>Texto</td>
			</tr>
			<tr>
				<td>Texto</td><td>Texto</td>
			</tr>
			<tr>
				<td>Texto</td><td>Texto</td>
			</tr>
			<tr>
				<td>Texto</td><td>Texto</td>
			</tr>
			<tr>
				<td>Texto</td><td>Texto</td>
			</tr>
			<tr>
				<td>Texto</td><td>Texto</td>
			</tr>
			<tr>
				<td>Texto</td><td>Texto</td>
			</tr>
			<tr>
				<td>Texto</td><td>Texto</td>
			</tr>
			<tr>
				<td>Texto</td><td>Texto</td>
			</tr>
			<tr>
				<td>Texto</td><td>Texto</td>
			</tr>
		</table>
	</div>
</div>
</body>
</html>
Posiblemente hay alguna otra solución, pero mientras alguno de los maestros piensa en ella, aquí dejo esta.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #3 (permalink)  
Antiguo 12/01/2006, 10:21
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Le echaremos un vistazo muchas gracias
  #4 (permalink)  
Antiguo 12/01/2006, 12:09
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
Hola a todos, hola MikiBroki.

Bueno, no sé si esto te puede ayudar.

Es la solución estándar.
  #5 (permalink)  
Antiguo 12/01/2006, 12:49
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Gracias,

He estado probando pero según creo esto hace que las filas de THEAD y TFOOT aparezcan siempre, modicando sólo el contenido del TBODY, pero claro, el problema es que la tabla crece y se hacen necesarias las barras de desplazamiento del navegador.

La solución de las capas supongo que sí irá bien para lo que busco, aunque como dice Patomas, quedamos a la espera de si alguien conoce una mejor
  #6 (permalink)  
Antiguo 12/01/2006, 13:03
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
Hola de nuevo.

Cita:
Iniciado por MikiBroki
Gracias,
He estado probando pero según creo esto hace que las filas de THEAD y TFOOT aparezcan siempre, modicando sólo el contenido del TBODY,
No necesariamente.

Cita:
Iniciado por MikiBroki
Gracias,
pero claro, el problema es que la tabla crece y se hacen necesarias las barras de desplazamiento del navegador.

La solución de las capas supongo que sí irá bien para lo que busco, aunque como dice Patomas, quedamos a la espera de si alguien conoce una mejor
A lo mejor te interesa
  #7 (permalink)  
Antiguo 16/01/2006, 03:09
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Muchas gracias Jorolo, las soluciones que daban no funcionaban en firefox+ie pero gracias a ellas he conseguido sacarlo, he puesto el código que funciona por si a alguien le sirve en el enlace que me has pasado

Gracias !
  #8 (permalink)  
Antiguo 23/01/2006, 12:06
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola todos :

sólo agregar algún enlace más

barra de desplazamiento en tablas y layers

Allí hay otros enlaces, y en uno de Wako está el detalle de los navegadores que aceptan la barra de desplazamiento en el tbody.

saludos
  #9 (permalink)  
Antiguo 23/01/2006, 12:53
 
Fecha de Ingreso: junio-2005
Ubicación: Edo. Mex
Mensajes: 725
Antigüedad: 12 años, 6 meses
Puntos: 5
Lo puedes solucionar facilmente con css (overflow:auto)

Un ejemplo:
<div style="overflow: hidden; height: 20px">
Los títulos (primera fila)
</div>
<div style="overflow:auto; width:450px; height:200px; align:left;">
Datos del resto de la tabla
</div>

Y listo¡

Los valores "auto" y "scroll" no funcionan en ninguna version de Netscape hasta la 4.5 y en algunas versiones de Explorer 4.0.

Última edición por ricardomz; 23/01/2006 a las 13:01
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 11:01.