A continuación se muestra el botón de JavaScript que he escrito para ocultar/mostrar la tabla. Por defecto, la tabla está centrada con margen: automático, y funciona.

Pero, cada vez que hago clic en el botón para ocultar/mostrar la tabla, restablece los márgenes automáticos y alinea la tabla a la izquierda.

Si desactivo la pantalla: ninguna, se muestra centrada en la tabla, y si elimino el javascript, se muestra normalmente. He intentado configurarlo de nuevo con

 document.getElementById("vcontrols").style.margin = "0 auto"

pero no funciona

Aquí está el CSS utilizado.

 <style> body { background-color: #111; } .container { max-width: 80%; margin: auto; background: #333; color: #fff; text-align: center; } .tabela { margin: 0 auto; } #vcontrols { display: none; } </style>

aquí está el guión

 function toggleControls() { var Skrivalica = document.getElementById('vcontrols'); var displaySetting = Skrivalica.style.display; var hideshow = document.getElementById('hideshow'); if (displaySetting == 'block') { Skrivalica.style.display = 'none'; hideshow.innerHTML = 'Full Details'; } else { Skrivalica.style.display = 'block'; hideshow.innerHTML = 'Hide Details'; } }

Y aquí está el cuerpo principal, tabla

 <div class="container"> <button onclick="toggleControls()" id="hideshow">Full Details</button> <table class="tabela" id="vcontrols"> <tr> <th>Action 1</th> <th>Action 2</th> <th>Action 3</th> <th>Action 4</th> <th>Action 5</th> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> <td>Item 4</td> <td>Item 5</td> </tr> </table> </div>