[AYUDA]Problema ocultar/mostrar celda de una tabla sin que se descoloque el contenido

[hosyou]

Buenaas, soy nuevo por aqui, sin embargo llevo consultando este foro bastante tiempo ya, asi que saludos!

Tengo el siguiente problema, quiero hacer una tabla en html que muestre en cada fila unos datos determinados, y además un botón para mostrar/ocultar una segunda fila debajo de esta, que contenga más informacion.

El código es el siguiente:

Esta es la cabecera de la tabla:

Código HTML:

<TABLE border='1px'>
    <TR bgcolor='silver'>
        <TH align='center' width='100'>N&deg Id</TH>
        <TH align='center' width='100'>DNI</TH>
        <TH align='center'>Nombre</TH>
        <TH align='center'>E-mail</TH>
        <TH align='center'></TH> 
    </TR> 

Esto se repite tantas veces como sea necesario para ir contruyendo cada fila.

Código HTML:

 <TR>
            <TD align='center'>ID_1</TD>
            <TD align='center'>DNI_1</TD>
            <TD>Nombre_1</TD>
            <TD>Email_1</TD>
            <TD>
                <BUTTON href='#' onclick='JavaScript:ShowHide("1111")'>Ver Grupos</BUTTON>
            </TD>
        </TR> 
        
        <TR id='1111' style='display:none'>
            <TD align='center' colspan='5'> <!-- CELDA CRITICA! -->
                <TABLE border='1'>
                    <TR>
                        <TH align='center' colspan='4'>TABLA 2</TD>
                    </TR>
                    <TR>
                        <TD align='center'>ASDAD</TD>
                        <TD align='center'>ASDAD</TD>
                        <TD align='center'>ASDAD</TD>
                        <TD align='center'>ASDAD</TD>
                    </TR>
                
                </TABLE>
            </TD>
        </TR> 

Como se puede observar, el boton "Ver Grupos", en la quinta celda de la primera fila, muestra/oculta la fila de abajo, haciendo referencia a la misma a través del id='1111'.

Por otro lado, tenemos que la segunda tabla (TABLA 2) está centrada dentro de una celda de la segunda fila de la tabla principal. La celda en cuestión es la "CELDA CRITICA"

Hasta ahi bien, las dos cosas funciona perfectamente, por separado. En cuanto junto las dos cosas la "celda critica" actua como si tuveira un colspan="1", por lo que se queda a la izquierda de la tabla alineada con la primera columna y todo se desajusta.

He probado a poner el "id='1111' style='display:none'", tanto en la fila, como en la celda, como en la tabla. Si lo pongo en la fila o en la celda pasa lo que he descrito. Si lo pongo en la tabla, la celda respeta el colspan, pero las celdas de la tabla se alinean a la izquierda del todo de la "celda critica", aunque se haya especificado la propiedad align="center".

Por lo que he podido comprobar el problema está al tocar la el atributo display de la propiedad style. En cuanto se toca el atributo para configurar el ShowHide, la celda se descoloca, si no se toca dicha propiedad entonces las tablas se muestran bien, pero claro se muestran todas, ya no funciona el showhide.

La funcion ShowHide que estoy utilizando es la predeterminada, no estoy usando ninguna funcion javascript personalizada.

En fin, no se que hacer, estoy pensando en buscar otro formato para presentar los datos, pero me gustaría saber si alguien tiene alguna solucion.

Muchas gracias por adelantado y un salduo!