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>

來源

2016-07-22 Nic

您能否提供指向您的網站的鏈接？或小提琴，我們可以看到是什麼導致此問題 – 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）。

來源

2016-07-22 19:31:20 adamSrgnt

jQuery數據表頭與引導選項卡中的行不匹配

回答

相關問題