为什么数据表表的最后一个标题与最后一列不对齐？答案

【问题标题】：Why does data-table table last header not align with last column?为什么数据表表的最后一个标题与最后一列不对齐？
【发布时间】：2017-08-12 10:10:34
【问题描述】：

我使用 DataTable 库创建了一个表（即使用 Foundation-zurb 5.5.3），根据下图，我在 Chrome 和 IE 11 中都看到最右边的列标题与首次打开页面时的其他行。实际网页是http://iprobesolutions.com/learn/wireless-conference-system-comparison。但是，如果我打开 devtools 尝试检查代码，问题就会消失！当我使用 CTRL+ F5 刷新时，它会重新出现。

当我创建这个小提琴时，问题没有出现：http://jsfiddle.net/setbon/x75o53ck/

以下只是粘贴的一小部分代码。如果您能查看网页，我将不胜感激，因为这是显示问题的地方...可能是 IE 和 Chrome 中的错误？

<table id="example" class="display nowrap table1 compact">

【问题讨论】：

标签： datatables datatables-1.10 zurb-foundation-5

【解决方案1】：

我看到您正在加载 Datatables FixedHeader 代码。我不知道您是如何使用它或是否使用它，但它与 scrollX 和 scrollY 不兼容： https://datatables.net/extensions/fixedheader/

尝试删除 FixHeader 或滚动选项。

【讨论】：

根据我们在数据表论坛上的会议...许多 tx 为您提供帮助 Kevin！

【解决方案2】：

通常当表格在初始化时被隐藏然后在选项卡、模式对话框等中变得可见时，就会出现这些类型的问题。

在大多数情况下，解决方案是调用 columns.adjust() 在表格可见后重新计算列宽。

table.columns.adjust();

当我在你的表初始化后运行上面的代码时，问题就消失了。

我无法解释为什么您的桌子会出现此问题。我对Foundation框架不熟悉，但我认为初始化表时不必调用foundation()。

有关更多信息、示例和详细信息，请参阅jQuery DataTables: Column width issues with Bootstrap tabs。

【讨论】：

非常感谢您的回复。我按如下方式放置了您的代码，但没有任何反应......请问我应该粘贴代码行的正确位置是什么？ table.buttons().container() .appendTo( '#example_wrapper .small-6.columns:eq(0)' ); table.columns.adjust().draw(); }）。基础（）;
我把你的那行代码放到了我更新 JS 代码的小提琴中：jsfiddle.net/setbon/m1Lg8h9f
如果你有机会，如果你能告诉我在哪里放置你的代码，我将不胜感激。