如何实现WordPress TablePress表格移动端局部列显示+横向滚动？

方案一：纯自定义CSS实现（无需额外插件） #

这是最直接的实现方式，无需依赖扩展，仅通过CSS即可达成固定2-3列、剩余列横向滚动的效果：

1. 给目标表格添加自定义类
   打开TablePress的表格编辑页面，在「额外CSS类」输入框中填入fixed-column-scroll（类名可自定义），保存表格。

2. 添加媒体查询CSS代码
   进入WordPress后台 → TablePress → 插件选项 → 自定义CSS，粘贴以下代码：

   /* 移动端断点可按需调整，这里用768px作为示例 */
   @media (max-width: 768px) {
     /* 让表格容器支持横向滚动 */
     .tablepress.fixed-column-scroll {
       overflow-x: auto;
       display: block;
       width: 100%;
     }
     /* 固定左侧前2列，如需固定3列则把`-n+2`改为`-n+3` */
     .tablepress.fixed-column-scroll thead th:nth-child(-n+2),
     .tablepress.fixed-column-scroll tbody td:nth-child(-n+2) {
       position: sticky;
       left: 0;
       background-color: #ffffff; /* 替换为你的表格背景色，防止被滚动内容覆盖 */
       z-index: 1;
     }
     /* 可选：给固定列添加右侧边框，区分滚动区域 */
     .tablepress.fixed-column-scroll thead th:nth-child(2),
     .tablepress.fixed-column-scroll tbody td:nth-child(2) {
       border-right: 2px solid #eee;
     }
   }
   

方案二：结合TablePress Responsive Tables扩展 #

如果你已安装TablePress官方的「Responsive Tables」扩展，可以利用它的内置固定列功能：

1. 配置扩展选项
   在表格编辑页面的「响应式选项」中，选择「滚动（Scroll）」模式，然后在「自定义命令」输入框中添加：

   "fixedColumns": { "left": 2 }
   

   （left的值设为2则固定前2列，设为3则固定前3列）

2. 微调样式（可选）
   在TablePress的自定义CSS中添加以下代码，确保固定列的背景显示正常：

   @media (max-width: 768px) {
     .tablepress-responsive-scroll .dtfc-left-top-block,
     .tablepress-responsive-scroll .dtfc-left-bottom-block {
       background-color: #ffffff;
     }
   }
   

注意事项 #

• 不要给表格列设置强制百分比宽度，否则可能导致固定列挤压或错位
• 断点宽度（768px）可根据你的移动端适配需求调整为640px等其他值
• 固定列的背景色必须和表格主体背景色一致，否则滚动时会出现内容穿透问题

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