Solution to jQuery Datatables header misalignment

We often encounter this situation when using Datatables. After the browser or elements in HTML change the size or resolution, the title will be misaligned. This situation is because the Datatables framework uses serverSide: true,//The server queries the data attributes, which will add a style="width:**px;" attribute to the Table tag, which causes the title to change when the size is changed. uneven phenomenon. In this article, we mainly share with you the solution to the misalignment of jQuery Datatables headers. We hope it can help you.

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

If there is a horizontal scroll bar, the Table width is fixed

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

Call it a day, this is the perfect solution! !

Related recommendations:

Introduction to jquery plug-in datatables attributes and detailed explanations of creating paging and sorting examples

## What are #jQuery datatables? How to use datatables?

jquery+php implements the method of exporting datatables plug-in data to excel, jquerydatatables_PHP tutorial

The above is the detailed content of Solution to jQuery Datatables header misalignment. For more information, please follow other related articles on the PHP Chinese website!