响应式表格切换失效求助：窗口缩放后未正确切换表格

先揪出你代码里的问题：

1. jQuery脚本的错误 #

• 逻辑笔误：else分支的代码和if分支完全一样，不管窗口宽度多少，都会隐藏table_1、显示table_2，完全不符合需求。
• 缺少窗口变化监听：代码只在页面加载时执行一次宽度判断，拖拽窗口改变尺寸时不会重新触发判断，自然无法动态切换表格。

2. CSS媒体查询的错误 #

• 选择器不匹配：你写的是#footer1、#footer2，但实际表格的id是table_1、table_2，规则根本不会作用到目标元素上。
• 断点与逻辑错误：需求是700px作为分界，但你用了min-width:600px，且没有设置默认显示规则，窗口缩小后没有触发切换逻辑。

正确的实现方式 #

优先用CSS媒体查询（响应式场景首选） #

先设置默认状态，再通过媒体查询覆盖：

/* 默认：屏幕宽度<700px时，显示table_2，隐藏table_1 */
#table_1 { display: none; }
#table_2 { display: block; }

/* 当屏幕宽度≥700px时，切换成显示table_1，隐藏table_2 */
@media screen and (min-width: 700px) {
  #table_1 { display: block; }
  #table_2 { display: none; }
}

这样不管怎么拖拽窗口，浏览器会自动根据宽度切换显示，无需JS参与。

如果一定要用jQuery实现 #

修复逻辑并添加窗口resize监听：

// 封装判断逻辑为函数
function switchTables() {
  var windowWidth = $(window).width();
  if (windowWidth < 700) {
    $('#table_1').hide();
    $('#table_2').show();
  } else {
    $('#table_1').show();
    $('#table_2').hide();
  }
}

// 页面加载时先执行一次
switchTables();

// 监听窗口大小变化，实时触发切换
$(window).on('resize', switchTables);

注意：使用该方案需确保页面已引入jQuery库。

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