如何在WordPress中设置仅移动端/桌面端表格100%宽度并保留显示规则

核心思路 #

别把宽度样式和显示控制规则混在一起，分开处理就能避免冲突——宽度给全局表格统一设置，显示/隐藏单独交给媒体查询控制。

具体修改方案 #

方案1：拆分样式规则（推荐）

假设你原本的CSS是控制两个表格的显示切换，现在把宽度样式抽出来单独写，媒体查询只负责切换display属性：

/* 给两个表格统一设置宽度，确保填满容器 */
.desktop-table, .mobile-table {
  width: 100%;
  border-collapse: collapse; /* 可选，优化表格边框显示 */
}

/* 默认显示桌面端表格，隐藏移动端 */
.desktop-table {
  display: table;
}
.mobile-table {
  display: none;
}

/* 移动端断点下切换显示状态 */
@media (max-width: 768px) {
  .desktop-table {
    display: none;
  }
  .mobile-table {
    display: table;
  }
}

对应的HTML保持类名即可，不用加内联宽度：

<table class="desktop-table">
  <!-- 桌面端表格内容 -->
</table>
<table class="mobile-table">
  <!-- 移动端表格内容 -->
</table>

方案2：内联样式替代（应急用）

如果不想改全局CSS，给表格加内联宽度，但不要把display写在内联样式里（避免覆盖媒体查询的规则）：

<table class="desktop-table" style="width:100%;">
  <!-- 桌面端表格内容 -->
</table>
<table class="mobile-table" style="width:100%;">
  <!-- 移动端表格内容 -->
</table>

CSS里只保留显示控制的规则：

.desktop-table {
  display: table;
}
.mobile-table {
  display: none;
}
@media (max-width: 768px) {
  .desktop-table {
    display: none;
  }
  .mobile-table {
    display: table;
  }
}

额外注意事项 #

• 检查主题默认样式：有些WordPress主题会给表格加max-width或固定宽度限制，这时可以提高选择器优先级，比如写成.entry-content .desktop-table, .entry-content .mobile-table { width:100%; }
• 调整断点值：把768px换成你主题实际使用的移动端断点（比如640px）

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