Heim > Web-Frontend > js-Tutorial > Hauptteil

Lösung für die Fehlausrichtung des jQuery Datatables-Headers

小云云
Freigeben: 2017-12-07 15:57:12
Original
2333 Leute haben es durchsucht

Diese Situation tritt häufig bei der Verwendung von Datentabellen auf, nachdem der Browser oder Elemente in HTML die Größe oder Auflösung geändert haben, wird der Titel falsch ausgerichtet. Dies liegt daran, dass das Datatables-Framework serverSide: true verwendet. // Der Server fragt die Datenattribute ab, wodurch dem Table-Tag ein style="width:**px;"-Attribut hinzugefügt wird, das dazu führt, dass sich der Titel ändert, wenn die Größe geändert wird ist ein ungleichmäßiges Phänomen. In diesem Artikel teilen wir Ihnen hauptsächlich die Lösung für die Fehlausrichtung von jQuery Datatables-Headern mit. Wir hoffen, dass es Ihnen helfen kann.


<table id="example" class="table table-border table-bordered table-bg table-hover table-sort"> 
 <thead> 
 <tr class="text-c"> 
  <th width="25"> 
  <input type="checkbox" name="checkAll" class="checkall" onclick="checkedClean();"> 
  </th> 
  <th width="100">名称</th> 
  <th width="100">说明</th> 
  <th width="100">类型</th> 
  <th width="60">是否默认</th> 
  <th width="20">状态</th> 
  <th width="100"></th> 
 </thead> 
 <tbody> 
 </tbody> 
</table>
Nach dem Login kopieren


Lösung


#example{ 
 width: 100% !important; 
}
Nach dem Login kopieren


Wenn eine horizontale Bildlaufleiste vorhanden ist, ist die Tabellenbreite festgelegt


#example{ 
 width: ***px !important; 
}
Nach dem Login kopieren


Machen Sie Schluss, das ist die perfekte Lösung! !

Verwandte Empfehlungen:

Einführung in die Eigenschaften von JQuery-Plug-In-Datentabellen und detaillierte Erläuterung zum Erstellen von Paging- und Sortierbeispielen

Was sind jQuery-Datentabellen? Wie verwende ich Datentabellen?

jquery+php implementiert die Methode zum Exportieren von Datatables-Plug-in-Daten nach Excel, jquerydatatables_PHP-Tutorial

Das obige ist der detaillierte Inhalt vonLösung für die Fehlausrichtung des jQuery Datatables-Headers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage