Ver Mensaje Individual
  #2 (permalink)  
Antiguo 12/01/2006, 05:48
Avatar de PatomaS
PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 20 años, 1 mes
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 !