Tengo problemas para colocar un div absoluto fuera de una mesa, no soy un gran admirador del diseño de la mesa, pero encontré un proyecto existente con un diseño de mesa. El código es el siguient

<td colspan="2" align="right" style="padding-top:3px; padding-right:15px; padding-bottom:15px;" width="600px">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr><td height="37px" width="600px" style="background-image:url('P--IMG--P/welcomepanel/header.png'); background-repeat:no-repeat; background-position:bottom left;"><span class="heading" id="I--heading_text--I" style="padding-top:3px;"></span></td></tr>
        <tr>
            <td align='left' valign='middle' width="600px" height="522px" style="background-image:url('P--IMG--P/welcomepanel/middelblock_repeat.png'); background-repeat: repeat-y; padding-top:0px">
                <div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
                    [--C--comp--C--]
                </div>
            </td>
        </tr>
        <tr><td><img src="P--IMG--P/welcomepanel/middelblock_roundcorners.png"/></td></tr>
    </table>
</td>

Dónde[--C--comp--C--] es la cadena de reemplazo para un fckEditor que contiene una imagen dentro de un div, he establecido el índice z de ese div en 10 pero no quiere salir de la tabla ... y su posición absoluta.

Por favor, hágame saber lo que podría estar haciendo mal.

Me he dado cuenta de que el problema viene con el desplazamiento de desbordamiento en el contenedor td, si elimina laoverflow-y:scroll funciona bien, pero el problema es que necesito tener ese desbordamiento ya que hay mucho contenido dentro de ese td. No sé que hacer ahora. :( .. alguien por favor ayuda a un hermano!

Necesito que el mapa pequeño esté fuera de la mesa y que el mapa grande permanezca dentro de la mesa, muestra la imagen pequeña cuando pasas el cursor sobre el mapa grande usando Jquery para hacer zoom, que se carga en el monitor. Espero que esto ayude.