Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/09/2010, 11:53
jtrivino
 
Fecha de Ingreso: septiembre-2010
Mensajes: 2
Antigüedad: 14 años, 3 meses
Puntos: 0
scroll con tablas dinámicas, parte fija, parte variable

Hola a todos.
Estoy tratando de crear dos tablas, una es la cabecera y la otra contiene los datos y es variable. el problema es que tanto la cabecera como los datos exceden del tamaño de la pantalla, por lo que necesito que un scroll mueva tanto la parte fija como la variable horizontalmente, y sólo la variable verticalmente. He copiado este ejemplo buscando respuestas por el foro :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
</head>
<style>
.scroll
{
width:200px;
height:100px;
overflow: auto;
border:1px solid #000000; /* Solo lo puse para que se vea el cuadro*/
}
.titulo
{
color: #000000;
background:#00FF00;
font-weight: bold;
}
</style>
<body>

<div class="scroll">
<table>
<tr>
<td class="titulo">COLUMNA1</td>
<td class="titulo">COLUMNA2</td>
<td class="titulo">COLUMNA3</td>
<td class="titulo">COLUMNA4</td>
<td class="titulo">COLUMNA5</td>
<td class="titulo">COLUMNA6</td>
</tr>
</table>
</div>
<div class="scroll">
<table>
<tr>
<td class="titulo">COLUMNA1</td>
<td class="titulo">COLUMNA2</td>
<td class="titulo">COLUMNA3</td>
<td class="titulo">COLUMNA4</td>
<td class="titulo">COLUMNA5</td>
<td class="titulo">COLUMNA6</td>
</tr>
<tr>
<td class="titulo">COLUMNA1</td>
<td class="titulo">COLUMNA2</td>
<td class="titulo">COLUMNA3</td>
<td class="titulo">COLUMNA4</td>
<td class="titulo">COLUMNA5</td>
<td class="titulo">COLUMNA6</td>
</tr>
<tr>
<td class="titulo">COLUMNA1</td>
<td class="titulo">COLUMNA2</td>
<td class="titulo">COLUMNA3</td>
<td class="titulo">COLUMNA4</td>
<td class="titulo">COLUMNA5</td>
<td class="titulo">COLUMNA6</td>
</tr>
<tr>
<td class="titulo">COLUMNA1</td>
<td class="titulo">COLUMNA2</td>
<td class="titulo">COLUMNA3</td>
<td class="titulo">COLUMNA4</td>
<td class="titulo">COLUMNA5</td>
<td class="titulo">COLUMNA6</td>
</tr>
</table>
</div>
</body>
</html>

En este ejemplo hay dos scrolls, lo que necesito es que sólo con un scroll pueda mover las dos tablas horizontalmente, y la segunda se siga moviendo verticalmente. ¿Alguna idea?