Below is the some javascript button I've written to hide/show the table. By default table is centered with margin: auto, and it works.

But, whenever I click the button to hide/show table, it resets the auto margins, and left-aligns the table.

If I disable the display:none, it shows table centered, and if I remove the javascript it displays it normally. I've tried setting it again with

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

But it doesn't work

Here's the CSS used.

    <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>

Here's the script

 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';
    }
  }

And Here's the main body, table

        <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>