2012-01-30 7 views
5

Cuando intento el código de abajo, ocultando el desbordamiento no funciona (se expande):overflow: hidden no funciona dentro de una tabla

<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="1024" height="100" colspan="3">&nbsp;</td> 
    </tr> 
    <tr><td width="1024"> 
    <div style="width:1024;height:436;overflow:hidden;"> 
    <div style="position:absolute;"> 
    <table border="0" cellpadding="0" cellspacing="0"><tr> 
    <td width="51"><img src="images/page1_04.jpg" width="51" height="436" /></td> 
    <td width="922" height="437"><img src="images/page1_05.jpg" width="922" height="436" /></td> 
    <td width="51"><img src="images/page1_06.jpg" width="51" height="436" onMouseOver="this.src='images/hover/page1_arrow_hover_06.jpg'" onMouseOut="this.src='images/page1_06.jpg'" /></td> 
    <td width="300"><img src="images/page2_05.jpg" /></td> 
    <td width="51"><img src="images/page2_04.jpg" width="51" height="436" onMouseOver="this.src='images/hover/page2_arrow_hover_04.jpg'" onMouseOut="this.src='images/page2_04.jpg'" /></td> 
    <td width="922" height="437"><img src="images/page2_05.jpg" width="922" height="436" /></td> 
    <td width="51"><img src="images/page2_06.jpg" width="51" height="436" /></td> 
    </tr></table> 
    </div> 
    </div> 
    </td> 
    </tr> 
</table> 

Sin embargo, cuando se utiliza sólo un fragmento del código (el div principal) funciona bien.

¿Qué estoy haciendo mal?

Gracias de antemano, Marca.

+0

Usted ha hecho el div interior sea 'absolute', lo que significa que ya no está obligado por el flujo de documentos, o la configuración de anchura/altura de su padre div. –

Respuesta

6

Debe establecer el estilo con table-layout:fixed; along with overflow:hidden; en el elemento de la tabla.

+1

¡Gracias por el rápido comentario! Si te entendí bien, la tabla debería ser: pero aún no funciona. ¿Hice algo malo? – Mark

+1

¡Gracias chicos! Se trata de agregar "table-layout: fixed; overflow: hidden;" en estilo de tabla, haciendo que la posición del DIV sea relativa y manteniendo la eliminación del DIV padre. ¡Eress el mejor! – Mark

3

Esto debería funcionar:

<td width="1024" height="100" style="display:block; overflow:hidden;"></td> 
Cuestiones relacionadas