Datatables表頭不對齊怎麼辦

本章我們將教大家一個jQuery Datatables表頭不對齊的解決方法。我們用Datatables常常會遇到這種情況，就是瀏覽器或HTML裡元素改變大小或解析度後，標題就會出現不對齊現象。這種情況是因為Datatables框架中使用到serverSide : true,// 伺服器查詢資料屬性，它會使Table標籤中多一個style="width:**px;"屬性，這就導致了變化大小時標題對不齊現象。

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

   

解決方法

#example{ 
 width: 100% !important; 
}

如果遇到設有橫向捲軸時，就固定設定Table寬度

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

#這樣就完美解決啦。

以上內容就是jQuery Datatables表頭不對齊的解決辦法，希望能幫助大家。

相關建議：

PHPExcel實作凍結鎖定表頭的方法介紹

html5中實作table表格中的斜線表頭效果的5種做法

關於表頭排序的5篇文章推薦

#

以上是Datatables表頭不對齊怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！