0

Aus irgendeinem Grund auf meiner Website sind die Spaltenüberschriften meiner jQuery-Datentabelle nicht auf die Zeilen ausgerichtet.jQuery-Datentabelleheader, die nicht mit Zeilen im Bootstrap-Register ausgerichtet sind

Hier ist ein Beispiel: enter image description here Bitte beachten Sie, dass einige meiner Tabellen (die oben genannten enthalten) in Bootstrap-Registerkarten sind. Ich glaube, das ist der Grund, denn wenn sie nicht in einem Tab sind, zeigen sie sich gut.

Ich weiß, dass Bootstrap Daten in anderen Tabs 'nicht sichtbar' betrachtet, so denke ich, dass es damit verbunden ist.

Hat jemand eine einfache CSS oder JS reparieren? Danke im Voraus.

Bearbeiten, hier ist ein Code:

<!-- 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> 
+0

Könnten Sie einen Link zu Ihrer Website bereitstellen? oder eine Geige, wo wir sehen können, was dieses Problem verursacht – Deep

+0

Code hinzugefügt. – Nic

+0

Wir müssen den HTML-Code sehen, der von $ table1 und $ table2 erzeugt wird. – tnschmidt

Antwort

0

Stellen Sie sicher, Ihre Seite für DataTables w/ Bootstrap die js und CSS-Dateien benötigt hat. Wenn dataTables.bootstrap.js (und die zugehörigen dataTables.bootstrap.css) nicht enthalten sind, wird Ihre Tabelle nicht richtig dargestellt.

Die Hauptdatei DataTables hat den Namen jquery.dataTables.js, wobei das Format verwendet wird, das für die Mehrzahl der jQuery-Plug-Ins üblich ist. Es gibt auch eine Styling-Integrationsdatei für die verschiedenen von DataTables unterstützten Styling-Bibliotheken, die das Format dataTables.{style}.js (dataTables.bootstrap.js für Bootstrap zum Beispiel) hat.

Diese beiden Javascript-Dateien sollten enthalten sein - die Hauptdatei, die die grundlegenden DataTables-Funktionen und die Gestaltungsdatei enthält, um die Standardeinstellungen für die Styling-Bibliothek festzulegen.

Für CSS sollte nur eine einzelne Datei enthalten sein, da die Styling-Bibliothek die Kern-Styling-Optionen für die Tabelle bietet. Die CSS-Dateien haben das Format dataTables.{style}.css (dataTables.bootstrap.css für Bootstrap zum Beispiel).

Verwandte Themen