在非活动选项卡上使用Bootstrap装饰的DataTable具有窄头

Question

我正在使用带有Bootstrap的DataTables并将其全部工作.然后我需要一个选项卡中的表格,当我这样做时,表格标题开始变窄,恰好适合标题文本的宽度.如果在显示页面时选项卡处于活动状态,则表格看起来很棒.你可以看到我的意思的一个例子.标签1看起来很好.标签2具有窄标题.

如果我启用排序并单击选项卡2上的列,则标题将扩展为适当的宽度,但始终开始缩小.

Answer 1

看起来您的标题列已用 初始化width: 0px。我认为是因为它们没有渲染（选项卡 2 有display: none）。

如果您包含 bootstrap.js 库，您可以尝试在选项卡切换时初始化 DataTable：

$('a[data-toggle="tab"]').on('shown', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
   $('#table-b').dataTable({ ... });
});