JavaScript切换表格显隐后重置CSS margin:auto居中对齐该如何解决

<table> 元素的原生默认 display 属性值为 table，你的JS代码在显示表格时强制将其设为了 block，改变了表格的原生布局行为。margin: 0 auto 规则无法正常作用于display属性为 block 的表格元素，这是出现左对齐问题的核心原因，你之前手动设置margin无效也是同样的逻辑导致的。

有两种可行方案：

• 方案1：直接修改JS中的display属性赋值
  将代码中显示表格时的 block 替换为 table 即可，修改后的完整代码如下：

function toggleControls() {
    var Skrivalica = document.getElementById('vcontrols');
    var displaySetting = Skrivalica.style.display;
    var hideshow = document.getElementById('hideshow');

    if (displaySetting == 'table') {
      Skrivalica.style.display = 'none';
      hideshow.innerHTML = 'Full Details';
    }
    else {
      Skrivalica.style.display = 'table';
      hideshow.innerHTML = 'Hide Details';
    }
}

修改后不需要额外添加设置margin的代码，表格会自动恢复原有的居中效果。

• 方案2：使用CSS类切换控制显隐（更推荐）
  该方案不需要硬编码元素的display属性，适配性更强：

1. 修改CSS代码，新增隐藏类，删除原有#vcontrols的display规则：

/* 新增规则 */
.hidden {
    display: none;
}
/* 删掉原来的 #vcontrols { display: none; } 规则 */

2. 修改HTML中表格的类，默认添加hidden类实现初始隐藏：

<table class="tabela hidden" id="vcontrols">

3. 修改JS代码，切换类实现显隐控制：

function toggleControls() {
    var Skrivalica = document.getElementById('vcontrols');
    var hideshow = document.getElementById('hideshow');
    Skrivalica.classList.toggle('hidden');
    hideshow.innerHTML = Skrivalica.classList.contains('hidden') ? 'Full Details' : 'Hide Details';
}

内容的提问来源于stack exchange，提问作者GoranH.