DataTable设置sScrollY后列宽异常，需重置列宽并设最大宽度

我之前也碰到过DataTable启用垂直滚动（sScrollY）后列宽错位的坑，刚好你的场景和我当时的情况很像，给你整理几个实测有效的解决方法：

问题根源 #

当你开启sScrollY时，DataTables会把表头（<thead>）和表体（<tbody>）拆分到两个独立的容器里渲染，这就很容易导致两者的列宽计算不一致，出现表头和内容对不上的情况。你之前试的参数没生效，大概率是参数组合不对，或者需要手动强制同步列宽。

具体解决方案 #

1. 先把DataTables的初始化参数配置对 #

首先修正你的初始化代码，把必要的滚动参数加上，同时关闭自动宽度让我们手动控制：

var oTable = $('#example1').DataTable({
    "sScrollY": "200px", // 你的滚动高度
    "sScrollX": "100%", // 开启水平滚动
    "sScrollXInner": "110%", // 内部宽度设为比容器宽一点，避免内容被截断
    "bAutoWidth": false, // 关闭自动宽度计算
    "bScrollCollapse": true // 当内容不足时收缩表格高度
});

⚠️ 注意：你的表格ID是example1，不是代码里的example，这个小细节别搞错了！

2. 手动同步表头和表体的列宽 #

如果参数调整后还是有错位，就在表格初始化完成后，强制把表头的列宽同步到表体的每一列：

// 监听表格初始化完成事件
oTable.on('init.dt', function() {
    var headerThs = $('#example1 thead th'); // 获取所有表头单元格
    $('#example1 tbody tr').each(function() {
        var tds = $(this).find('td');
        tds.each(function(index) {
            // 把对应位置表头的宽度赋值给表体单元格
            $(this).width($(headerThs[index]).width());
        });
    });
});

3. 加一点CSS辅助对齐 #

再补几行CSS，防止文字换行或者盒模型导致的宽度偏差：

#example1 thead th, #example1 tbody td {
    white-space: nowrap; /* 禁止文字换行，避免宽度变化 */
    box-sizing: border-box; /* 确保padding和border不影响宽度计算 */
}

4. 适配响应式场景（针对hidden-phone类） #

你的表格里有hidden-phone类的列，在窗口大小变化时，记得重新同步列宽：

$(window).resize(function() {
    // 先让DataTables重新计算列宽
    oTable.columns.adjust().draw();
    // 再同步表头和表体的宽度
    var headerThs = $('#example1 thead th');
    $('#example1 tbody tr').each(function() {
        var tds = $(this).find('td');
        tds.each(function(index) {
            $(this).width($(headerThs[index]).width());
        });
    });
});

完整可运行代码 #

把上面的内容整合起来，就是完整的实现，直接替换你的代码就行：

<section class="panel">
    <header class="panel-heading">
        Scheduled Outages
    </header>
    <div class="panel-body">
        <div class="adv-table">
            <table class="display table table-bordered table-striped" id="example1">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Planned Start Date</th>
                        <th>Planned End Date</th>
                        <th>D...</th>
                        <th class="hidden-phone">Ho...</th>
                        <th class="hidden-phone">Syst...</th>
                        <th class="hidden-phone">Area</th>
                        <th class="hidden-phone">Loc Name</th>
                        <th class="hidden-phone">Loc Unit</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="gradeX">
                        <td>65</td>
                        <td>01/17/2018 00:00:00</td>
                        <td>01/22/2018 00:00:00</td>
                        <td class="center hidden-phone">5</td>
                        <td class="center hidden-phone">0</td>
                        <td class="center hidden-phone">Mainline</td>
                        <td class="center hidden-phone">Kennedy Ave(WO01)</td>
                        <td class="center hidden-phone">Kennedy Ave</td>
                        <td class="center hidden-phone">Meter Loopline</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th>Id</th>
                        <th>Planned Start Date</th>
                        <th>Planned End Date</th>
                        <th>D...</th>
                        <th class="hidden-phone">Ho...</th>
                        <th class="hidden-phone">Syst...</th>
                        <th class="hidden-phone">Area</th>
                        <th class="hidden-phone">Loc Name</th>
                        <th class="hidden-phone">Loc Unit</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</section>

<style>
#example1 thead th, #example1 tbody td {
    white-space: nowrap;
    box-sizing: border-box;
}
</style>

<script>
$(document).ready(function() {
    var oTable = $('#example1').DataTable({
        "sScrollY": "200px",
        "sScrollX": "100%",
        "sScrollXInner": "110%",
        "bAutoWidth": false,
        "bScrollCollapse": true
    });

    // 初始化完成后同步列宽
    function syncColumnWidths() {
        var headerThs = $('#example1 thead th');
        $('#example1 tbody tr').each(function() {
            var tds = $(this).find('td');
            tds.each(function(index) {
                $(this).width($(headerThs[index]).width());
            });
        });
    }

    oTable.on('init.dt', syncColumnWidths);

    // 窗口 resize 时重新同步
    $(window).resize(function() {
        oTable.columns.adjust().draw();
        syncColumnWidths();
    });
});
</script>

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