javascript - 数据表列未对齐

Question

我在页面上使用 bootstrap 作为选项卡。这些选项卡内是 JQuery 数据表。出于某种原因，当用户在页面加载后单击选项卡时，数据表的标题不会与行对齐。

如果我单击其中一个标题(对列进行排序的按钮)，则列会自行修复。有人可以帮我吗？我已经尝试了几种 CSS 和 Javascript“hacks”来解决这个问题。

这是我初始化数据表的地方:

$( ".dynamic-table" ).DataTable({
    "scrollY": 450,
    "scrollCollapse": true,
    "lengthMenu": [[10, 50, 500, -1], [10, 50, 500, "All"]]
});

Answer 1

SOLUTION

使用columns.adjust()重新计算列宽的 API 方法。

来自manual :

Call it when the table becomes visible if hidden when initialized (for example in a tab) or when the data changes significantly.

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
});

DEMO

参见 this jsFiddle用于代码和演示。

LINKS

参见 jQuery DataTables – Column width issues with Bootstrap tabs用于解决 jQuery DataTables 和 Bootstrap Tabs 最常见的问题。