响应式表格问题：点击按钮后大屏无法恢复多列显示

我明白你遇到的困扰了——在屏幕宽度≤820px时点击按钮切换单列显示后，把屏幕放大到821px以上，表格没办法自动恢复到原本显示4列的状态，还是停留在之前选中的单列。这核心原因是JavaScript设置的行内样式优先级远高于CSS媒体查询规则，导致大屏下的默认显示规则被行内样式覆盖了。

下面给你两个实用的解决方案，你可以根据自己的代码习惯选择：

方案一：用CSS类替代行内样式控制显示（推荐） #

这种方法遵循“样式由CSS主导，JS仅切换状态”的最佳实践，从根源避免行内样式干扰媒体查询：

1. 新增并调整CSS规则 #

/* 新增控制列显示/隐藏的通用类 */
.col-hidden {
  display: none !important;
}
.col-show {
  display: table-cell !important;
}

/* 保留原媒体查询，调整小屏默认列状态 */
@media screen and (max-width:820px){
  .table,.table2,.table3{ width: 100%; }
  .space{ display: none; }
  /* 小屏默认隐藏所有数据列，由按钮控制显示 */
  .second-column,.third-column,.forth-column,.fifth-column {
    display: none;
  }
  .table.fixed { table-layout: fixed; }
  .table2.fixed { table-layout: fixed; }
  .table3.fixed { table-layout: fixed; }
  td:first-child{ width: 50%; }
  .big{ padding: 10px 30px; }
  .box,.box2,.box3{ padding: 5px 15px; }
  .btn-div{ display: block !important; }
  .empty{ display: none; }
}

/* 大屏下强制所有列显示，覆盖类样式 */
@media screen and (min-width:821px){
  .second-column,.third-column,.forth-column,.fifth-column {
    display: table-cell !important;
  }
  td:first-child{ font-size: 12px; }
  .table,.table2,.table3{ white-space: nowrap; font-size: 13px; }
  th{ text-align: center; font-size: 10px; font-weight: 600; }
  span{ padding-left: 4px !important; text-align: center; }
}

2. 修改JavaScript函数，操作类而非行内样式 #

function myFun(){
  // 显示第二列，隐藏其他列
  document.querySelectorAll(".second-column").forEach(e => {
    e.classList.remove('col-hidden');
    e.classList.add('col-show');
  });
  document.querySelectorAll(".third-column,.forth-column,.fifth-column").forEach(e => {
    e.classList.add('col-hidden');
    e.classList.remove('col-show');
  });
}

function myFunc(){
  document.querySelectorAll(".third-column").forEach(e => {
    e.classList.remove('col-hidden');
    e.classList.add('col-show');
  });
  document.querySelectorAll(".second-column,.forth-column,.fifth-column").forEach(e => {
    e.classList.add('col-hidden');
    e.classList.remove('col-show');
  });
}

function myFunct(){
  document.querySelectorAll(".forth-column").forEach(e => {
    e.classList.remove('col-hidden');
    e.classList.add('col-show');
  });
  document.querySelectorAll(".second-column,.third-column,.fifth-column").forEach(e => {
    e.classList.add('col-hidden');
    e.classList.remove('col-show');
  });
}

function myFuncti(){
  document.querySelectorAll(".fifth-column").forEach(e => {
    e.classList.remove('col-hidden');
    e.classList.add('col-show');
  });
  document.querySelectorAll(".second-column,.third-column,.forth-column").forEach(e => {
    e.classList.add('col-hidden');
    e.classList.remove('col-show');
  });
}

3. HTML部分保持原结构即可，无需修改 #

方案二：监听窗口resize事件，大屏时重置列状态 #

如果不想改动太多CSS，也可以通过监听窗口尺寸变化，在屏幕宽度超过820px时清除所有行内样式，让媒体查询规则生效：

// 新增屏幕尺寸检查函数
function resetTableColumns() {
  if (window.innerWidth >= 821) {
    // 清除所有数据列的行内display样式，恢复默认
    document.querySelectorAll(".second-column,.third-column,.forth-column,.fifth-column").forEach(e => {
      e.style.display = '';
    });
  }
}

// 页面加载时初始化检查
window.addEventListener('load', resetTableColumns);
// 窗口尺寸变化时实时检查
window.addEventListener('resize', resetTableColumns);

// 保留原有的按钮控制函数
function myFun(){ [...document.getElementsByClassName("second-column")] .forEach(e => e.style.display ="table-cell"); [...document.getElementsByClassName("third-column")].forEach(e => e.style.display = "none"); [...document.getElementsByClassName("forth-column")].forEach(e => e.style.display = "none"); [...document.getElementsByClassName("fifth-column")].forEach(e => e.style.display = "none"); }
function myFunc(){ [...document.getElementsByClassName("second-column")].forEach(e => e.style.display = "none"); [...document.getElementsByClassName("third-column")] .forEach(e => e.style.display = "table-cell"); [...document.getElementsByClassName("forth-column")].forEach(e => e.style.display = "none"); [...document.getElementsByClassName("fifth-column")].forEach(e => e.style.display = "none"); }
function myFunct(){ [...document.getElementsByClassName("second-column")].forEach(e => e.style.display = "none"); [...document.getElementsByClassName("third-column")].forEach(e => e.style.display = "none"); [...document.getElementsByClassName("forth-column")] .forEach(e => e.style.display = "table-cell"); [...document.getElementsByClassName("fifth-column")].forEach(e => e.style.display = "none"); }
function myFuncti(){ [...document.getElementsByClassName("second-column")].forEach(e => e.style.display = "none"); [...document.getElementsByClassName("third-column")].forEach(e => e.style.display = "none"); [...document.getElementsByClassName("forth-column")].forEach(e => e.style.display = "none"); [...document.getElementsByClassName("fifth-column")] .forEach(e => e.style.display = "table-cell"); }

两种方案都能解决你的问题，方案一更推荐，因为它的代码结构更清晰，后续维护起来也更方便。

内容的提问来源于stack exchange，提问作者Ghezlan AL-Nofly