如何实现表格仅在无法完整显示时自动收缩？

我完全懂你的痛点——固定断点的响应式表格插件太死板了，要么在小屏幕上表格还放不下，要么在大屏幕上把本来能完整显示的表格强行收缩，体验很差。下面给你一个基于jQuery的解决方案，完全贴合你的需求：只有当表格容器出现横向滚动条时，才触发表格的收缩逻辑，否则保持正常显示。

核心思路 #

我们抛弃固定屏幕宽度的断点逻辑，直接判断表格容器的实际显示状态：

• 当容器的scrollWidth（表格内容的总宽度）大于clientWidth（容器的可见宽度）时，说明表格显示不全、出现了横向滚动条，此时启用表格的响应式收缩。
• 反之，当表格能完整显示时，立刻恢复正常的表格布局。

完整代码实现 #

1. 修改后的 index.html #

基本结构不变，仅优化容器样式并确保表格标记正确：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Responsive Table On Scroll</title>
    <script src="//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.min.js" defer></script>
    <script src="footable.js" defer></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.core.standalone.min.css"/>
    <style>
        /* 给表格容器添加横向滚动支持，未收缩时也能查看完整内容 */
        .justtable {
            overflow-x: auto;
            margin: 20px;
            width: calc(100% - 40px);
        }
    </style>
</head>
<body>
    <div class="justtable">
        <table class="table footable">
            <thead>
                <tr>
                    <th> No. </th>
                    <th data-breakpoints="x-small"> Name </th>
                    <th data-breakpoints="x-small"> Town </th>
                    <th data-breakpoints="x-small"> Quality of work </th>
                    <th data-breakpoints="x-small"> Characteristics </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> 1 </td>
                    <td> Kira </td>
                    <td> Velikiy Novgorod </td>
                    <td> Great </td>
                    <td> You're one in a million, You're once in a lifetime, You made me discover one of the stars above us, You're one in a million </td>
                </tr>
                <tr>
                    <td> 2 </td>
                    <td> Sasha </td>
                    <td> Kazan </td>
                    <td> Amazing </td>
                    <td> Sometimes, Love can hit You everyday, Sometimes, You can fall for everyone you see, But only One can really make me stay, The sign, the one in the sky, has said to me </td>
                </tr>
                <tr>
                    <td> 3 </td>
                    <td> Nervov </td>
                    <td> Saint-Petersburg </td>
                    <td> Beautiful </td>
                    <td> I always will remember how I felt that day, A feeling indescribable to me, yeah, I always knew there was an answer for my prayer, And You, You're the One, the One for me </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

2. 自定义逻辑的 footable.js #

替换原来的初始化代码，加入滚动检测和动态切换FooTable状态的逻辑：

jQuery(function($) {
    // 初始化FooTable，先关闭自动断点检测
    const $table = $('.table').footable({
        "breakpoints": {
            "x-small": 0, // 设置极小值，让FooTable只在我们触发时生效
            "small": 0
        },
        "enableBreakpoints": false // 禁用默认的断点触发
    });

    // 获取表格的父容器
    const $container = $table.closest('.justtable');

    // 定义检测表格状态并切换的核心函数
    function toggleTableResponsive() {
        const hasScrollbar = $container[0].scrollWidth > $container[0].clientWidth;
        const footableInstance = $table.data('footable');

        if (hasScrollbar) {
            // 出现滚动条，开启FooTable的响应式收缩
            if (!footableInstance.options.enableBreakpoints) {
                footableInstance.options.enableBreakpoints = true;
                footableInstance.init(true); // 重新初始化生效
            }
        } else {
            // 无滚动条，恢复正常表格布局
            if (footableInstance.options.enableBreakpoints) {
                footableInstance.options.enableBreakpoints = false;
                footableInstance.init(true); // 重新初始化恢复
            }
        }
    }

    // 页面加载完成后立即检测一次
    $(window).on('load', toggleTableResponsive);

    // 窗口 resize 时实时检测（加防抖优化性能）
    $(window).on('resize', debounce(toggleTableResponsive, 100));

    // 防抖函数：避免resize事件频繁触发导致性能问题
    function debounce(func, wait) {
        let timeoutId;
        return function() {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => func.apply(this, arguments), wait);
        };
    }
});

关键细节说明 #

1. 精准滚动检测：通过容器的scrollWidth和clientWidth对比，准确判断表格是否显示不全，比固定屏幕宽度的断点逻辑更贴合实际场景。
2. FooTable动态控制：先关闭FooTable的自动断点检测，只有当检测到滚动条时才开启，完全由表格的实际显示状态决定是否收缩。
3. 防抖优化：窗口resize时会频繁触发事件，防抖函数能减少不必要的检测，提升页面性能。
4. 容器样式优化：给容器添加overflow-x: auto，在未收缩状态下用户也能横向滚动查看完整表格，保证了基础体验。

这个方案完全适配你的静态站点需求，只依赖jQuery和FooTable，完美解决固定断点的痛点。

内容的提问来源于stack exchange，提问作者Саша Черных