如何让集成DataTables的HTML表格加宽并保持横向滚动不越界？

一、用DataTables原生滚动替代自定义CSS #

DataTables自带成熟的横向滚动功能，比手动写CSS更兼容插件逻辑，还能避免样式冲突：
初始化表格时添加scrollX: true配置，同时移除你原来的display: block和overflow-x: scroll——插件会自动生成包裹容器处理滚动逻辑：

$(document).ready(function() {
    $('#your-table-id').DataTable({
        scrollX: true,
        // 保留你原本的排序等配置
    });
});

二、给技能说明列设置有效最小宽度 #

之前min-width没生效，大概率是table-layout: fixed或DataTables样式优先级导致的，试试以下两种方案：

方案1：直接给列元素加样式 #

给最右侧列的表头和单元格设置min-width，同时把表格布局改为auto（fixed模式下min-width规则会被限制）：

/* 用:last-child选中最后一列，或者给列加自定义类名更精准 */
table#your-table-id th:last-child,
table#your-table-id td:last-child {
    min-width: 200px; /* 按需调整，比如250px */
    white-space: normal; /* 让文字自动换行，避免挤压变形 */
}

/* 调整表格基础样式 */
table#your-table-id {
    table-layout: auto;
    max-width: 100%;
    width: 100%;
}

方案2：通过DataTables配置指定列宽 #

用插件自带的columnDefs配置列宽，优先级更高，不会被插件样式覆盖：

$(document).ready(function() {
    $('#your-table-id').DataTable({
        scrollX: true,
        columnDefs: [
            {
                targets: -1, // -1代表最后一列
                minWidth: 200,
                width: 'auto'
            }
        ]
    });
});

三、解决固定宽度导致滚动失效的问题 #

之前用!important设固定宽度后滚动失效，是因为display: block的表格需要父容器限制宽度才会触发滚动。改用DataTables的scrollX后，插件会自动创建带overflow-x: auto的容器，表格可以超出容器宽度，自然触发横向滚动，不需要手动设置固定宽度。

四、移动端额外优化 #

如果移动端还是拥挤，可通过媒体查询进一步加大列的最小宽度：

@media (max-width: 768px) {
    table#your-table-id th:last-child,
    table#your-table-id td:last-child {
        min-width: 250px;
    }
}

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