Que mide en realidad el offsetWidth?... no se porque sucede esto, Ayuda!!

diego1311 · #1 (**permalink**) 15/08/2009, 20:30

Quiero obtener el ancho de una tabla que esta dentro de otra tabla, y cuando coloco el codigo javascript afuera de las etiqutas<table></table>, funciona bien pero cuando coloco el mismo codigo entre las etiquetas <td></td> detecta que el ancho es "cero "

Sin embargo si quiero miodificar el color de fondo el codigo funciona bien sin importar si lo pongo fuera o dentro de la etiqueta <td></td>

Código HTML:

<html>
<head>
<title>AAAA!!!!!!!!!!!</title>
</head>
<table width="400" height="400" border="1" cellpadding="8" cellspacing="0">
<tr><td>

    <center>
    <table width="200" height="200" border="1" cellpadding="8" cellspacing="0" id="tabla">
    <tr><td>
		Esta es una tabla adentro de otra
	</td></tr>
	</table>
	</center><br><br>

    <script language="javascript">
	var ancho = document.getElementById('tabla');
	document.write("el ancho de la tabla roja es: "+ancho.offsetWidth);
	ancho.style.backgroundColor='red';
	</script>
	
</td></tr>
</table><br><br>

<script language="javascript">
var ancho = document.getElementById('tabla');
document.write("el ancho de la tabla roja es: "+ancho.offsetWidth);

</script>
<body>
</body>
</html>

Aqui el link para que vean la pagina con el codigo que posteo:

http://diego1311.byethost6.com/ancho.html

Lo que quiero saber es como obtener el ancho cuando coloco el codigo entre las etiquetas<td></td>

zerokilled · #2 (**permalink**) 15/08/2009, 22:52

como probablemente sabras, offsetWidth esta supuesto a devolver el ancho en pixeles de un elemento dado. ahora, en tu caso el problema no es el codigo sino el navegador. si compruebas el codigo en firefox y chrome veras que te devuelve el valor como debe. la explicacion se podria reducir a que los motores de "rederizacion" html (en otras palabras el user agent) no operan de la misma forma en cada navegador. un detalle adicional que puediera aplicar a tu caso. en el libro CSS: the definitive guide, habia leido que las tablas podrian considerarse un caso especial en cuanto se refiere a renderizacion. supone que las columnas pueden variar de ancho segun el contenido y por ello el navegador requiere primero analizar todo el contenido antes de mostrar la tabla. en el unico caso que esto puede variar es cuando se le aplica el estilo table-layout:fixed;. ahora bien, no confundas. no quiero decir que aplicando el estilo solucione tu problema. solo queria recalcar que este pudiera ser el caso de iexplorer.

diego1311 · #3 (**permalink**) 13/10/2009, 16:40

Gracias, ya lo solucione

estefanosalazar · #4 (**permalink**) 29/10/2009, 13:32

Podrias decirnos como lo solucionaste?

Muchas gracias!

Saludos