twitter-bootstrap - 在非事件选项卡上用 Bootstrap 装饰的 DataTable 具有窄标题

Question

我正在将 DataTables 与 Bootstrap 一起使用，并且一切正常。然后我需要一个标签中的表格，当我这样做时，表格标题开始变窄，正好适合标题文本的宽度。如果显示页面时选项卡处于事件状态，则表格看起来很棒。您可以看到 example我的意思。 Tab 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({ ... });
});