DataTables列宽固定173px无法修改，求自适应无滚动方案

问题根源 #

你的表格列被固定在173px，是因为DataTables默认会给列加上固定宽度的内联样式，再加上底部搜索栏的输入框默认宽度太宽，撑大了列，导致你设置的columnDefs完全不起作用，横向滚动也消不掉。

具体解决步骤 #

1. 用CSS覆盖默认样式 #

先写自定义CSS，强制表格和列自适应，同时限制搜索框宽度：

/* 禁止表格容器横向滚动 */
.dataTables_wrapper {
  overflow-x: hidden !important;
}

/* 让表头、单元格自动适配内容和容器 */
#table th, #table td {
  width: auto !important;
  white-space: nowrap; /* 可选：防止内容换行，不需要可以删掉 */
}

/* 限制底部搜索输入框宽度，避免撑大列 */
#table tfoot input {
  width: 100% !important;
  max-width: 150px; /* 宽度可以自己调 */
  box-sizing: border-box;
}

2. 调整DataTables初始化配置 #

修改你的JS代码，开启自动列宽计算，优化列宽设置：

var table = $('#table').DataTable({
  "lengthMenu": [5, 25, 50, 75, 100],
  "pageLength": 5,
  deferRender: true,
  scrollX: false,
  autoWidth: true, // 开启自动列宽，这是关键
  columnDefs: [
    { "width": "auto", targets: '_all' } // 所有列设为自动宽度
  ],
  initComplete: function () {
    this.api()
      .columns()
      .every(function () {
        var that = this;
        $('input', this.footer()).on('keyup change clear', function () {
          if (that.search() !== this.value) {
            that.search(this.value).draw();
          }
        });
      });
  },
});

3. 确保表格容器宽度正常 #

给表格父容器设置100%宽度，让表格能自适应：

#table_wrapper {
  width: 100% !important;
}

重点提醒 #

• autoWidth: true必须显式开启，它是DataTables自动计算列宽的核心开关
• 底部搜索框不限制宽度的话，会直接撑大对应列，这是很多人忽略的点
• 用!important是为了覆盖DataTables生成的内联样式，确保你的设置生效

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