Datatables列可见性异常：隐藏列后未自动显示待显示列

我来帮你捋捋这个问题——这其实是DataTables默认的列宽度适配逻辑在搞事情！默认情况下，它会让所有可见列自动撑满表格容器的宽度，所以你隐藏一列后，它不会主动把原本设置为可见但没显示出来的列补进来，反而会拉伸剩下的列占满空间。咱们来改改配置解决这个问题：

核心解决方案：开启横向滚动+禁用自动宽度 #

给你的DataTables配置加上scrollX: true和autoWidth: false这两个参数，这会让表格的宽度由所有可见列的总宽度决定，而不是强制适配容器宽度。这样当你隐藏一列后，空出来的位置就会让原本可见但被窗口挡住的列自动显示出来了。

可选优化：给列设置固定宽度 #

如果想要更精准的列宽控制，避免列宽随意变化，可以在columns数组里给每列加上width属性，比如指定具体的像素值或百分比。

修改后的完整配置示例 #

this._table.DataTable({
  stateSave: true,
  processing: true,
  serverSide: true,
  autoWidth: false, // 新增：禁用自动宽度适配
  scrollX: true, // 新增：开启横向滚动
  ajax: {
    url: this._url,
    type: 'POST',
    data: (data) => {
      data.csrf = csrfToken
    }
  },
  pageLength: 50,
  columns: this._columns.map(col => ({
    ...col,
    width: col.width || '120px' // 可选：给列设置默认宽度，也可以单独给每列指定
  })),
  colReorder: true,
  order: order,
  dom: 'lBfrtip',
  buttons: [
    { extend: 'colvis', columns: ':not(.entity-hyperlink)' },
    jQuery.extend(true, {}, buttonCommon, { extend: 'copyHtml5' }),
    jQuery.extend(true, {}, buttonCommon, { extend: 'csvHtml5' }),
    jQuery.extend(true, {}, buttonCommon, { extend: 'excelHtml5' }),
    jQuery.extend(true, {}, buttonCommon, { extend: 'pdfHtml5', orientation: 'landscape', pageSize: 'A1' }),
  ]
});

效果验证 #

修改后再测试：

• 隐藏当前显示的列时，原本设置为可见但被窗口宽度遮挡的列会自动填充到空出的位置，而不是拉伸现有列
• 即使只保留一列显示，它也会保持你设置的宽度（或者默认的合理宽度），不会占满整个表格容器

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