WP站点表格移动端显示异常：文字全加粗及TD背景问题求助

问题原因 #

从你说的「所有表格均存在此问题」就能判断，这绝对是全局CSS样式的范围覆盖或优先级冲突导致的：

• 大概率是你的站点在移动端媒体查询（比如@media (max-width: 768px)这类针对小屏幕的规则）里，写了范围过宽的加粗样式，比如 table td, table th { font-weight: bold; }，甚至可能加了!important强制生效，直接把所有表格单元格里的文本都改成加粗了。
• 也有可能是某个全局的<p>标签样式在移动端被强制设置了加粗，而表格里的文本全是用<p>包裹的，所以全部中招。

修复方案 #

方案1：修正全局CSS（推荐） #

先定位问题样式，再精准修改：

1. 打开浏览器开发者工具（按F12），切换到移动端视图，选中表格里的普通文本，查看「样式」面板里的font-weight属性，找到被打上对勾的加粗规则，看它的选择器和来源文件。
2. 把这个规则的选择器范围缩小——比如只给需要加粗的表头（th）设置加粗，或者给特定类名的表格单元格设置，而不是全局所有td/p。比如把原来的：

   @media (max-width: 768px) {
     table td { font-weight: bold; }
   }
   

   改成：

   @media (max-width: 768px) {
     table th { font-weight: bold; } /* 只给表头加粗，保留单元格普通文本 */
   }
   

方案2：局部样式覆盖 #

如果暂时不想动全局样式，可以给表格加专属类，用更高优先级的样式覆盖：

1. 给目标表格加上类名，比如：

   <table class="normal-text-table">
     <!-- 表格内容 -->
   </table>
   

2. 在CSS里添加规则（如果是移动端专属问题，记得放在媒体查询块里）：

   @media (max-width: 768px) {
     .normal-text-table td p {
       font-weight: normal !important; /* 强制覆盖全局加粗样式 */
     }
   }
   

方案3：排查!important滥用 #

如果发现全局样式里用了!important强制加粗，优先考虑去掉这个!important——它会让样式优先级变得极其混乱，是很多样式冲突的根源。如果必须保留，就用更具体的选择器（比如结合ID+类名）来覆盖它。

内容的提问来源于stack exchange，提问作者Anna Moors