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> 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.textContent = 'Full Details'; } else { Skrivalica.style.display = 'block'; hideshow.textContent = 'Hide Details'; } } body { background-color: #111; } .btn-container { display: flex; justify-content: center; } .container { max-width: 80%; margin-left: auto; margin-right: auto; background: #333; color: #fff; text-align: center; display: flex; } .tabela { margin: 0 auto; } #vcontrols { display: none; } <div class="btn-container"> <button onclick="toggleControls()" id="hideshow">Full Details</button> </div> <div class="container"> <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>Tal vez sea una forma más fácil, pero cambié algo de HTML y CSS. Dejó el JS solo. Parecía estar funcionando para mí. ¡Avísame si no es lo que querías!