WordPress 给文章内容中的 Table 添加滚动容器的最佳实践

在 WordPress的文章或页面中，我们经常会插入一些表格（<table>）。如果表格列数过多，在移动端浏览时就会出现内容溢出的问题，导致排版错乱，用户体验不佳。
一个常见的解决方案是为表格外层添加一个容器，并设置横向滚动（overflow-x: auto），让表格在小屏幕上可以左右滑动。本文将介绍两种实现方式：JavaScript
包裹和 PHP 过滤器。

方法一：使用 JavaScript 动态包裹

这种方式是在页面加载完成后，使用 JS 或 jQuery 将 .hzt-post-content
内的所有 <table> 标签用一个 <div> 包裹起来。

原生 JS 实现

document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".hzt-post-content table").forEach(function (table) {
        if (!table.parentElement.classList.contains("hzt-table-wrapper")) {
            var wrapper = document.createElement("div");
            wrapper.className = "hzt-table-wrapper";
            wrapper.style.overflowX = "auto";
            wrapper.style.width = "100%";

            table.parentNode.insertBefore(wrapper, table);
            wrapper.appendChild(table);
        }
    });
});

jQuery 实现

jQuery(document).ready(function ($) {
    $(".hzt-post-content table").each(function () {
        if (!$(this).parent().hasClass("hzt-table-wrapper")) {
            $(this).wrap('<div class="hzt-table-wrapper" style="overflow-x:auto;width:100%;"></div>');
        }
    });
});

优点

• 快速见效，无需修改 WordPress 内容或主题模板。\
• 只作用于指定容器，兼容性较好。

缺点

• 依赖 JS 修改 DOM，SEO 不如直接输出时完整。\
• 如果用户禁用 JS，包裹的 div 不会存在。

方法二：使用 PHP the_content 过滤器

WordPress 提供了 the_content 过滤器，可以在文章输出时修改 HTML
内容。我们可以用正则在输出时为 <table> 自动添加容器，这样更规范、SEO
更友好。

add_filter('the_content', function ($content) {
    if (strpos($content, '<table') !== false) {
        $content = preg_replace(
            '/<table([^>]*)>(.*?)<\/table>/is',
            '<div class="hzt-table-wrapper"><table$1>$2</table></div>',
            $content
        );
    }
    return $content;
});

然后在 CSS 文件中添加样式：

.hzt-table-wrapper {
    overflow-x: auto;
    width: 100%;
}

优点

• 从源头处理 HTML，语义更完整。\
• SEO 友好，搜索引擎能直接看到结构。\
• 不依赖 JS，性能更佳。

缺点

• 需要在主题或插件中编写 PHP 代码。

哪种方式更合适？

• 如果只是快速解决问题，可以用 JavaScript。\
• 如果希望从根本上优化，并兼顾 SEO 和性能，推荐使用 PHP
  the_content 过滤器 的方式。

总结

在 WordPress 中为 <table>
添加外层滚动容器，是提升移动端体验的常见优化。\

• 临时方案：用 JS 包裹，简单快速。\
• 规范方案：用 PHP 在输出时处理，更加稳健。

如果你正在开发主题或插件，推荐直接在 the_content
过滤器中实现，这样可以保证所有文章表格在输出时就具备良好的响应式表现。