Div dentro de una celda de tabla, ¡ayuda!

anibalpotenza · #1 (**permalink**) 20/03/2007, 08:23

Hola, soy programador Java y estoy creando unas librerías de etiquetas. Tengo un problema con el scroll. La idea es usar la tabla como un layout de la pantalla, pero dentro de una celda quiero poner un componente DIV para que pueda tener las barras de desplazamiento. La idea es tener una tabla con barras de desplazamiento. Hace 15 días que estoy peleando con esto, pero no logro dar con la solución en FireFox o IE7(strict mode). Quisiera ver si alguien me puede dar una mano con esto. Gracias.

PD: para ver el modo stricto de IE7 hay que poner esta línea primero
"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "ht tp://ww w.w3.org/TR/html4/strict.dtd">" que tiene espacios porque no me dejan publicar enlaces por ahora en los mensajes.

Código HTML:

<html>
<head>
	<title>Scroll 7</title>
</head>
<body>

<table border="3" style="width:40%; height:40%;"" align="center">
<tr>
	<td>
		<div style="width:40%; height:40%; overflow:scroll; position:absolute;">
			<p>
				HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
				HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
				HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
				HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
				HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
				HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
				HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
				HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
				HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
			</p>
		</div>
	</td>
</tr>
</table>

</body>
</html>

xamaruk · #2 (**permalink**) 21/03/2007, 10:10

Hola anibalpotenza.
El scroll horizontal lo puedes resolver cambiando el atributo "position" del div, en lugar de absolute déjalo en relative. De este modo no hay pegas, tanto en Firefox como en IE (aunque yo lo probé en el 6).
Para el scroll vertical, que supongo que es el que te interesa, la cosa se complica más. El problema viene porque, hasta donde yo sé, los navegadores no reconocen el atributo de altura para las tablas ni las celdas. Es más, las celdas tienden a crecer para mostrar todo su contenido si las dimensiones de este sobrepasan las medidas de la propia celda, o las de la tabla. Por lo tanto en tu caso la celda crece hacia abajo para mostrar todo el contenido del div, ya que la altura de éste la has especificado en relación a la altura de la celda que lo contiene (40%).
Se me ocurre dos formas de resolverlo, aunque no sé si serán compatibles con tu proyecto. La primera es especificar una altura en píxeles al div, eso determina al mismo tiempo la altura de la celda (lo que puede ser un problema en tu diseño), y si el contenido es mayor que la altura que le das al div aparecerá el scroll.
La otra opción es por si necesitas que la altura del div sea del 40% de la altura de la celda. En ese caso puedes anidar tu div al 40% de altura dentro de otro que si tendrá una altura en píxeles y que será el que determine la altura de la celda. Quedaría así:

Código HTML:

<table width="750" border="2" cellspacing="0" cellpadding="0">
  <tr>
    <td>
	<div id="Layer1" style="position:relative; z-index:1; background-color: #99CCCC; layer-background-color: #99CCCC; border: 1px none #000000; height: 200px;">
<div style="width:40%; height:40%; overflow:scroll; position:relative;">
			<p>	HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
				HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
				HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
				HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
				HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
				HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
				HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
				HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
				HOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDOHOLAMUNDO
			</p>
  </div>
</div>
	</td>
      </tr>
 </table>

Espero que te sirva de ayuda
Un saludo