大家好，主机镇今天给大家带来如何使子比主题文章中表格支持横向滑动功能，使你的表格在小屏设备上也能完整展示表格的内容！

教程不易，谢谢支持，原文地址：https://www.zhujiz.com/2779.html

首先在主题自定义代码中添加以下css

/* 使表格在小屏幕设备上可横向滚动 */
/* 主机镇教程编写 www.zhujiz.com */
table {
    width: 100%;
    overflow-x: auto;
    display: block;
}

/* 为表格容器添加滚动条 */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* 为iOS设备添加平滑滚动效果 */
}

/* 避免单元格内容溢出，确保内容不换行 */
table td, table th {
    white-space: nowrap;
}

然后在functions.php`文件中添加一段JavaScript代码

/* 主机镇教程编写 www.zhujiz.com */
function add_custom_table_script() {
    ?>
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        var tables = document.querySelectorAll("article table"); // 选择文章中的所有表格
        tables.forEach(function(table) {
            var wrapper = document.createElement("div");
            wrapper.className = "table-responsive";
            table.parentNode.insertBefore(wrapper, table);
            wrapper.appendChild(table);
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'add_custom_table_script');

完成上述步骤后，您需要验证设置是否生效。