如何在 Bootstrap 标签页中居中并固定 DataTable 列宽？

2026-11-06数据小许

结论

问题主要出在宽度设置不一致：columnDefs 设置了列宽，但表格本身的宽度是 70%。启用纵向滚动后，DataTables 会分别布局滚动区域的表头和表格。表格在隐藏状态下初始化时，也无法根据实际可见尺寸完成测量。

为 DataTables 外层容器指定宽度，并让表格填满容器。保留列宽设置，在 Bootstrap 标签页显示后调用 columns.adjust()。另外，scrollY 应设置为具体高度，例如 '300px'。如果不需要纵向滚动，可以移除该配置。

设置表格和列宽

示例中三列宽度合计为 400px。可以将 DataTables 容器设为这个宽度，并用 flex 布局居中：

.datatable-wrapper {
  display: flex;
  justify-content: center;
}

.datatable-wrapper .dt-container {
  width: 400px;
  max-width: 100%;
}

.datatable-wrapper table.dataTable {
  width: 100% !important;
  table-layout: fixed;
}

.datatable-wrapper th,
.datatable-wrapper td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

初始化时保留列宽设置。需要纵向滚动时，把 scrollY: true 改为具体高度：

const eventTable = new DataTable('#event_table', {
  data: obj_list,
  columnDefs: [
    { width: '100px', targets: 0 },
    { width: '150px', targets: [1, 2] }
  ],
  columns: [
    { title: 'startTime', data: 'startTime' },
    { title: 'nameOfBand', data: 'nameOfBand' },
    { title: 'nameOfBar', data: 'nameOfBar' }
  ],
  autoWidth: false,
  scrollY: '300px',
  paging: false,
  ordering: true,
  order: [[0, 'asc']],
  select: { style: 'single' }
});

如果不需要限制表格内容区的高度，删除 scrollY 配置即可。列中文字超出可用宽度时，上面的 CSS 会截断文字并显示省略号。需要完整显示时，可以增大容器或列宽。

在标签页显示后重新计算

表格在隐藏状态下初始化，可能会因可见宽度不准确而导致布局错位。Bootstrap 3 的标签页触发 shown.bs.tab 后，可以重新调整列宽：

$('a[data-toggle="tab"]').on('shown.bs.tab', function () {
  if ($('#event_table').is(':visible')) {
    eventTable.columns.adjust().draw(false);
  }
});

draw(false) 会保留当前分页位置。示例关闭了分页，因此这里不会改变分页状态。如果页面有多个标签页，可以将事件监听器限定到包含该表格的标签页链接上。

还要检查页面是否重复加载了 jQuery。给出的 HTML 同时引入了 jQuery 3.7.1 的两个文件，保留其中一个即可。重复加载通常不会直接导致列宽错位，但可能造成插件初始化和事件绑定混乱。