Solution au désalignement de l'en-tête jQuery Datatables

Nous rencontrons souvent cette situation lors de l'utilisation de Datatables. Une fois que le navigateur ou les éléments HTML ont modifié la taille ou la résolution, le titre sera mal aligné. Cette situation est due au fait que le framework Datatables utilise serverSide: true,//Le serveur interroge les attributs de données, ce qui ajoutera un attribut style="width:**px;" à la balise Table, ce qui entraînera le changement du titre lorsque la taille est modifié. Dans cet article, nous partageons principalement avec vous la solution au désalignement des en-têtes jQuery Datatables. Nous espérons que cela pourra vous aider.

<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>

Solution

#example{ 
 width: 100% !important; 
}

S'il y a une barre de défilement horizontale, la largeur du tableau est fixe

#example{ 
 width: ***px !important; 
}

Arrêtez-vous, c'est la solution parfaite ! !

Recommandations associées :

Introduction aux propriétés des tables de données du plug-in jquery et explication détaillée de la création d'exemples de pagination et de tri

Que sont les tables de données jQuery ? Comment utiliser les tables de données ?

jquery+php implémente la méthode d'exportation des données du plug-in datatables vers Excel, tutoriel jquerydatatables_PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!