如何在WordPress网站移动端修复表格显示尺寸问题？

核心思路 #

移动端屏幕宽度有限，3-5列的表格直接显示会挤成一团或溢出屏幕，最直接的解决办法是给表格添加横向滚动容器，让用户能左右滑动查看完整内容，同时不破坏桌面端的正常显示效果。

直接可用的代码方案 #

1. 包裹表格的HTML代码 #

把你文章里的表格整个套进这个容器中：

<div class="responsive-sports-table">
  <!-- 你的原始表格代码放在这里 -->
</div>

2. 后台添加自定义CSS #

登录WordPress后台，点击「外观」→「自定义」→「额外CSS」，粘贴以下代码后点击「发布」：

.responsive-sports-table {
  overflow-x: auto;
  margin: 1.5em 0;
  -webkit-overflow-scrolling: touch; /* 优化iOS设备滚动顺滑度 */
}

.responsive-sports-table table {
  width: 100%;
  min-width: 600px; /* 可根据列数调整：3列设400px，5列设600px即可 */
  border-collapse: collapse; /* 可选，让表格边框更整齐 */
}

/* 可选：移动端缩小文字让内容更紧凑 */
@media (max-width: 768px) {
  .responsive-sports-table td,
  .responsive-sports-table th {
    font-size: 0.9em;
    padding: 6px 4px;
  }
}

详细操作步骤 #

1. 打开需要修改的文章，切换到「文本」编辑模式（别用可视化模式，看不到原始代码）
2. 找到文章中的表格代码，用上面的<div class="responsive-sports-table">将整个表格包裹起来
3. 保存文章，然后进入后台「外观」→「自定义」→「额外CSS」粘贴上述CSS代码，发布生效
4. 用移动端打开文章测试，此时表格可左右滑动查看完整内容

注意事项 #

• 该CSS不会与主题原有表格样式冲突，仅添加滚动容器功能
• min-width可根据实际列数灵活调整，确保所有列能完整展开
• -webkit-overflow-scrolling: touch专门优化iOS设备滚动体验，安卓设备也能正常适配

内容的提问来源于stack exchange，提问作者Nimra Sajad3