jQuery数据表头与引导选项卡中的行不匹配

问题描述：

由于我的网站上的某些原因，我的jQuery数据表的列标题没有与行对齐。jQuery数据表头与引导选项卡中的行不匹配

这里是一个例子：请注意，我的一些表（包括上面的一个）在Bootstrap选项卡内。我相信这是原因，因为当他们不在标签中时，他们显示得很好。

我知道引导程序认为其他选项卡中的数据不可见，所以我认为它与此相关。

有没有人有一个简单的CSS或JS修复？提前致谢。

编辑，这里是一些代码：

<!-- Nav tabs --> 
<ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation" class="<?php echo $tab_1; ?>"><a href="#activeusers" class="tab-nonwhitetext" aria-controls="activeusers" role="tab" data-toggle="tab">Active Users</a></li> 
    <li role="presentation" class="<?php echo $tab_2; ?>"><a href="#inactiveusers" class="tab-nonwhitetext" aria-controls="inactiveusers" role="tab" data-toggle="tab">Inactive Users</a></li> 
</ul> 

<!-- Tab panes --> 
<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane <?php echo $tab_1; ?>" id="activeusers"> 
     <?php echo $table1; ?> 
    </div> 
    <div role="tabpanel" class="tab-pane <?php echo $tab_2; ?>" id="inactiveusers"> 
     <?php echo $table2; ?> 
    </div> 
</div> 

<table "border="0" cellpadding="3" cellspacing="20" class="display dataTable new-table-styling dynamic-table" id="table" width="100%"> 
    <thead> 
     <tr> 
      <th>First Name</th><th>Last Name</th><th>Job Title/Education</th><th>Room/Phone(s)</th><th>Email/Supervisor</th><th>Employee Type</th><th>Image</th><th>Actions</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     </tr> 
    </tbody> 
</table>

您能否提供指向您的网站的链接？或小提琴，我们可以看到是什么导致此问题 – Deep

添加了一些代码。 – Nic

我们需要看到$ table1和$ table2生成的HTML – tnschmidt

答

确保你的页面有需要DataTables w/ Bootstrap的JS和CSS文件。如果不包括dataTables.bootstrap.js（和关联的dataTables.bootstrap.css），则表格将无法正确呈现。

DataTables主文件的名称为jquery.dataTables.js，它使用大多数jQuery插件通用的格式。还有一个针对DataTables支持的各种样式库的样式集成文件，其格式为dataTables.{style}.js（例如，用于Bootstrap的dataTables.bootstrap.js）。

这两个JavaScript文件都应该包含在内 - 主要文件包括基本的DataTables功能和样式文件以设置适合样式库的默认值。

对于CSS，只应包含单个文件，因为样式库将为表提供核心样式选项。 CSS文件格式为dataTables.{style}.css（例如，用于Bootstrap的dataTables.bootstrap.css）。

jQuery数据表头与引导选项卡中的行不匹配

相关推荐