如何通过JS禁用Bootstrap DataTables无效水平滚动及解决CSS失效问题

优先方案：修改_MyLayout中的DataTables JS配置 #

直接在现有配置中添加禁用水平滚动和自动列宽的参数，从根源上消除无效滚动条：

$('.table').DataTable({
    pageLength: 50,
    pagingType: "full_numbers",
    scrollY: '300px',
    scrollCollapse: true,
    scrollX: false, // 强制关闭水平滚动功能
    autoWidth: true // 让DataTables自动计算列宽，避免内容溢出
});

• scrollX: false：明确禁用水平滚动，阻止DataTables生成水平滚动容器
• autoWidth: true：让插件自动调整列宽，适配表格容器宽度，避免内容超出容器产生滚动条

备选方案：通过site.css强制移除滚动条 #

若JS配置无法解决，可利用!important提升样式优先级（解决site.css其他修改不生效的问题），在site.css中添加以下代码：

/* 移除DataTables水平滚动条 */
.dataTables_scrollBody {
    overflow-x: hidden !important;
}

/* 确保表格容器占满父元素宽度 */
.dataTables_wrapper {
    width: 100% !important;
}

/* 可选：让单元格内容自动换行，避免内容溢出 */
.table td, .table th {
    white-space: normal !important;
    word-wrap: break-word !important;
}

• !important：强制覆盖style.min.css中的原有样式，确保修改生效
• 单元格换行设置可从根本上解决因内容过宽导致的滚动条问题

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