DataTables FixedColumns功能失效求助：横向滚动时前4列无法冻结

嘿，我仔细看了你的代码示例，发现几个可能导致FixedColumns功能失效的问题，咱们一个个来捋清楚：

1. 重复引入jQuery导致的核心冲突 #

你的代码里先后引入了两个不同版本的jQuery：

• 头部的<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
• 底部的<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

重复引入会直接覆盖之前的jQuery实例，导致DataTables和FixedColumns的绑定逻辑出现异常，这大概率是dtfc-has-left类没被正确添加的核心原因。解决方法：删掉其中一个，建议保留版本一致的引入，比如只留底部的3.7.0或者头部的3.7.1就行。

2. 样式优先级冲突可能干扰列宽计算 #

你在自定义CSS里给th, td设置了width: 120px，同时又在DataTables的columnDefs里给前4列设置了相同的宽度值。虽然数值一样，但双重定义可能会让FixedColumns在计算列宽时出现混乱。可以尝试去掉自定义CSS里的th, td宽度设置，统一交给DataTables的配置来管理。

3. 修正后的完整代码示例 #

我把你的代码做了上述修改，你可以直接测试：

<!DOCTYPE html>
<html>
<head>
    <title>DataTables FixedColumns Example</title>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.2.2/css/fixedColumns.dataTables.min.css" />
    <style>
        body { 
            font-family: Arial, sans-serif; 
            margin: 20px; 
        } 
        /* Container with fixed width and overflow-x auto for horizontal scrolling */ 
        #tableContainer { 
            border: 1px solid #ccc; 
        } 
        th, td { 
            white-space: nowrap; 
            /* 移除了这里的width设置，统一由DataTables配置管理 */
        } 
        /* Make DataTables scroll wrapper visible */ 
        div.dataTables_wrapper { 
            width: 100%; 
        }
    </style>
</head>
<body>
    <h2>DataTables FixedColumns Minimal Example</h2>
    <div id="tableContainer">
        <table id="example" class="display nowrap" style="width:100%;">
            <thead>
                <tr>
                    <th>Action</th>
                    <th>Estimation ID</th>
                    <th>Reference ID</th>
                    <th>Project Name</th>
                    <th>Status</th>
                    <th>Result</th>
                    <th>Change Requests</th>
                    <th>Client Company</th>
                    <th>Company Phone</th>
                    <th>Company Email</th>
                    <th>Client Budget (£)</th>
                    <th>Material Value (£)</th>
                    <th>Tender Value (£)</th>
                    <th>MarkUp %</th>
                    <th>Estimated Duration (Days)</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><button>Review</button></td>
                    <td>101</td>
                    <td>EST-001</td>
                    <td>Bridge Construction</td>
                    <td>Pile Setup Pending</td>
                    <td>NAY</td>
                    <td>2</td>
                    <td>ABC Corp</td>
                    <td>+1 555-1234</td>
                    <td>abc@example.com</td>
                    <td>150,000.00</td>
                    <td>75,000.00</td>
                    <td>120,000.00</td>
                    <td>25.00</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td><button>Proceed</button></td>
                    <td>102</td>
                    <td>EST-002</td>
                    <td>Building Renovation</td>
                    <td>Valuation Pending</td>
                    <td>NAY</td>
                    <td>0</td>
                    <td>XYZ Ltd</td>
                    <td>+44 207-111-2222</td>
                    <td>xyz@example.com</td>
                    <td>NAY</td>
                    <td>NAY</td>
                    <td>NAY</td>
                    <td>NAY</td>
                    <td>NAY</td>
                </tr>
                <tr>
                    <td><button>Review</button></td>
                    <td>103</td>
                    <td>EST-003</td>
                    <td>New Warehouse</td>
                    <td>Completed</td>
                    <td>Won</td>
                    <td>1</td>
                    <td>MegaCorp</td>
                    <td>+61 02-1234-5678</td>
                    <td>megacorp@example.com</td>
                    <td>500,000.00</td>
                    <td>200,000.00</td>
                    <td>450,000.00</td>
                    <td>15.00</td>
                    <td>180</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <!-- FixedColumns JS -->
    <script src="https://cdn.datatables.net/fixedcolumns/4.2.2/js/fixedColumns.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#example').DataTable({
                scrollX: true,
                scrollY: '300px',
                scrollCollapse: true,
                paging: true,
                fixedColumns: {
                    leftColumns: 4
                },
                columnDefs: [{
                    width: 120,
                    targets: [0, 1, 2, 3]
                }]
            });
        });
    </script>
</body>
</html>

修改说明： #

• 移除了重复的jQuery引入，确保全局只有一个jQuery实例
• 删除了自定义CSS中th, td的宽度设置，避免和DataTables的列宽配置冲突
• 保持了依赖加载的正确顺序：jQuery → DataTables CSS → FixedColumns CSS → DataTables JS → FixedColumns JS

应用这些修改后，你应该能看到dtfc-has-left类被正确添加到DataTables容器上，前4列在横向滚动时也能正常固定了。如果还是有问题，记得打开浏览器控制台看看有没有报错信息，这通常能帮你快速定位剩余问题~

内容来源于stack exchange