调整左侧Div宽度时DataTables.js响应式功能失效求助

DevOps 小满

2026-6-13

解决DataTables响应式失效问题（左侧可调整宽度场景）

问题描述

应用采用左右垂直布局：左侧为可水平调整宽度的导航树，右侧为DataTable。为左侧Div添加以下样式后，DataTables的响应式功能完全失效，窗口resize适配也停止工作：

overflow-y:scroll;pointer-events: auto;height: 100vh;resize: horizontal;min-width:20%;max-width:75%;

完整示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.2.2/css/dataTables.bootstrap5.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/3.0.4/css/responsive.bootstrap5.css">

    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.2.2/js/dataTables.bootstrap5.js"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.4/js/dataTables.responsive.js"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.4/js/responsive.bootstrap5.js"></script>

    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
    <div class="row">
        <div class="col-md-6" style="overflow-y:scroll;pointer-events: auto;height: 100vh;resize: horizontal;min-width:20%;max-width:75%;">

        </div>
        <div class="col-md-6">

            <table id="example" class="table table-striped nowrap" style="width:100%">
                <thead>
                    <tr>
                        <th>First name</th>
                        <th>Last name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                        <th>Extn.</th>
                        <th>E-mail</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tiger</td>
                        <td>Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011-04-25</td>
                        <td>$320,800</td>
                        <td>5421</td>
                        <td>t.nixon@datatables.net</td>
                    </tr>
                    <tr>
                        <td>Garrett</td>
                        <td>Winters</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>63</td>
                        <td>2011-07-25</td>
                        <td>$170,750</td>
                        <td>8422</td>
                        <td>g.winters@datatables.net</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

<script>

var table = new DataTable('#example', {
    responsive: true,
    autoWidth: false,
    scrollX: true
});

$(window).resize(function() {
    table.columns.adjust().draw();
});

</script>
</html>

解决办法

1. 替换Bootstrap栅格布局，改用Flex布局

Bootstrap的col-md-6类会强制固定宽度比例，和resize: horizontal冲突，导致右侧容器宽度变化无法被DataTables检测到。修改布局为Flex实现自适应：

<div class="d-flex" style="height: 100vh;">
    <div class="left-panel" style="overflow-y:scroll;resize: horizontal;min-width:20%;max-width:75%;flex-shrink:0;">
        <!-- 左侧导航树 -->
    </div>
    <div style="flex-grow:1;overflow:auto;">
        <!-- DataTable容器 -->
        <table id="example" class="table table-striped nowrap" style="width:100%">
            <!-- 表格内容 -->
        </table>
    </div>
</div>

2. 监听左侧容器的resize事件，触发DataTables重绘

resize: horizontal不会触发window的resize事件，需要主动监听左侧容器尺寸变化，通知DataTables调整列宽：

// 使用ResizeObserver监听（现代浏览器推荐）
const leftPanel = document.querySelector('.left-panel');
new ResizeObserver(() => {
    table.columns.adjust().responsive.recalc();
}).observe(leftPanel);

// 兼容旧浏览器的定时检查方案
// let lastWidth = leftPanel.offsetWidth;
// setInterval(() => {
//     const currentWidth = leftPanel.offsetWidth;
//     if (currentWidth !== lastWidth) {
//         lastWidth = currentWidth;
//         table.columns.adjust().responsive.recalc();
//     }
// }, 100);

3. 调整DataTables配置

移除scrollX: true，响应式模式与横向滚动在该场景下存在冲突，优先让响应式处理列的显示隐藏：

var table = new DataTable('#example', {
    responsive: true,
    autoWidth: false
});

完整修改后的代码

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.2.2/css/dataTables.bootstrap5.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/3.0.4/css/responsive.bootstrap5.css">

    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.2.2/js/dataTables.bootstrap5.js"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.4/js/dataTables.responsive.js"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.4/js/responsive.bootstrap5.js"></script>

    <meta charset="UTF-8" />
    <title></title>
    <style>
        body { margin: 0; }
    </style>
</head>
<body>
    <div class="d-flex" style="height: 100vh;">
        <div class="left-panel" style="overflow-y:scroll;resize: horizontal;min-width:20%;max-width:75%;flex-shrink:0;border-right:1px solid #ddd;">
            <div style="height: 2000px;padding:10px;">左侧导航树</div>
        </div>
        <div style="flex-grow:1;overflow:auto;padding:10px;">
            <table id="example" class="table table-striped nowrap" style="width:100%">
                <thead>
                    <tr>
                        <th>First name</th>
                        <th>Last name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                        <th>Extn.</th>
                        <th>E-mail</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tiger</td>
                        <td>Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011-04-25</td>
                        <td>$320,800</td>
                        <td>5421</td>
                        <td>t.nixon@datatables.net</td>
                    </tr>
                    <tr>
                        <td>Garrett</td>
                        <td>Winters</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>63</td>
                        <td>2011-07-25</td>
                        <td>$170,750</td>
                        <td>8422</td>
                        <td>g.winters@datatables.net</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

<script>
var table = new DataTable('#example', {
    responsive: true,
    autoWidth: false
});

// 监听左侧面板resize
const leftPanel = document.querySelector('.left-panel');
new ResizeObserver(() => {
    table.columns.adjust().responsive.recalc();
}).observe(leftPanel);

// 保留窗口resize监听
$(window).resize(function() {
    table.columns.adjust().responsive.recalc();
});
</script>
</html>

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

调整左侧Div宽度时DataTables.js响应式功能失效求助

问题描述 #

解决办法 #

1. 替换Bootstrap栅格布局，改用Flex布局 #

2. 监听左侧容器的resize事件，触发DataTables重绘 #

3. 调整DataTables配置 #