TablePress插件CSS在iPhone上不生效，求移动端适配方案

问题场景 #

使用WordPress的TablePress插件制作产品尺寸表，通过Popup Maker嵌入弹窗后，桌面端和安卓手机显示正常，但iPhone端出现显示错乱问题。原使用的CSS代码如下：

/* General TablePress styles for all devices */
.tablepress {
  border-collapse: collapse;
  width: 100%;
}

.tablepress th,
.tablepress td {
  border: 1px solid #ddd;
  padding: 8px;
  font-size: 12px;
  text-align: center;
}

.tablepress thead th {
  background-color: #f2f2f2;
}

/* Mobile-specific TablePress styles */
@media (max-width: 768px) {
  .tablepress {
    overflow-x: auto;
    display: block;
  }

  .tablepress th,
  .tablepress td {
    font-size: clamp(8px, 2.5vw, 12px);
    padding: 3px;
    white-space: nowrap;
  }
}

/* Additional styling enhancements */
.tablepress tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.tablepress tbody tr:hover {
  background-color: #e0e0e0;
}

@media (max-width: 480px) {
  .tablepress th,
  .tablepress td {
    padding: 3px;
  }
}

.tablepress .highlighted-column {
  background-color: #e8f5e9;
  font-weight: bold;
}

.tablepress thead th {
  font-weight: bold;
  color: #333;
  padding: 5px;
}

优化后的CSS代码 #

针对iPhone Safari浏览器的兼容性问题，调整后的CSS如下：

/* 全局TablePress样式 */
.tablepress {
  border-collapse: collapse;
  width: 100%;
  /* 修复Safari横向滚动卡顿问题 */
  -webkit-overflow-scrolling: touch;
}

.tablepress th,
.tablepress td {
  border: 1px solid #ddd;
  padding: 8px;
  font-size: 12px;
  text-align: center;
  /* 全局强制单元格内容不换行，避免iPhone上布局错乱 */
  white-space: nowrap;
}

.tablepress thead th {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #333;
  padding: 5px;
}

/* 移动端适配（覆盖iPhone） */
@media (max-width: 768px) {
  .tablepress {
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
    /* 确保表格不超出弹窗容器 */
    max-width: 100%;
  }

  .tablepress th,
  .tablepress td {
    font-size: clamp(8px, 2.5vw, 12px);
    padding: 3px;
    white-space: nowrap;
  }
}

/* 小屏幕（如iPhone SE）额外适配 */
@media (max-width: 480px) {
  .tablepress th,
  .tablepress td {
    padding: 2px;
    font-size: clamp(7px, 2.8vw, 10px);
  }
}

/* 其他增强样式 */
.tablepress tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.tablepress tbody tr:hover {
  background-color: #e0e0e0;
}

.tablepress .highlighted-column {
  background-color: #e8f5e9;
  font-weight: bold;
}

额外弹窗容器调整 #

如果Popup Maker的弹窗仍存在挤压表格的情况，添加以下CSS确保弹窗内容容器适配：

.popup-content {
  max-width: 100%;
  overflow: hidden;
  padding: 10px;
}

修复说明 #

• 添加-webkit-overflow-scrolling: touch：解决iPhone Safari中横向滚动不流畅、卡顿的问题，还原安卓端的滚动体验
• 全局设置white-space: nowrap：避免Safari自动对单元格内容换行，防止列宽错乱
• 小屏幕进一步缩小内边距和字体：适配iPhone SE等小尺寸设备，确保表格内容完整显示
• 弹窗容器适配：确保表格有足够的显示空间，不会被弹窗的默认样式挤压

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