jQuery Datatables表頭不對齊的解決辦法

更新時間：2017年11月27日 14:55:42 作者：BugsCode

這篇文章主要為大家詳細介紹了jQuery Datatables表頭不對齊的解決辦法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

我們用Datatables經(jīng)常會遇到這種情況，就是瀏覽器或者HTML里元素改變大小或分辨率后，標題就會出現(xiàn)不對齊現(xiàn)象。這種情況是因為Datatables框架中使用到serverSide : true,// 服務器查詢數(shù)據(jù)屬性，它會使Table標簽中多一個style="width:**px;"屬性，這就導致了變化大小時標題對不齊現(xiàn)象。

<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">狀態(tài)</th> 
  <th width="100"></th> 
 </thead> 
 <tbody> 
 </tbody> 
</table>

解決方法

#example{ 
 width: 100% !important; 
}

如果遇到設有橫向滾動條時，就固定設置Table寬度

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

收工，這樣就完美解決了??！

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js/jquery去掉空格,回車,換行示例代碼
js/jquery去掉空格,回車,換行示例代碼。需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
JQuery.uploadify 上傳文件插件的使用詳解 for ASP.NET
今天下午整理文件上傳的例子，感覺收集到的例子都很不人性話，后來找到一個還可以的，本來想改成類似于騰訊QQ相冊那種方式，仔細看了一下是Flash的, 而且那個極速上傳插件也不知道用什么做的？問了一下，說是什么cgi. 搞得一頭霧水
2010-01-01
jquery使用append(content)方法注意事項分享
append(content)函數(shù)的功能向每個匹配的元素內(nèi)部追加內(nèi)容，在使用方法上需要引起大家的注意，詳細看下面示例
2014-01-01
jQuery實現(xiàn)顏色打字機的完整代碼
這篇文章主要介紹了jQuery實現(xiàn)顏色打字機的完整代碼，代碼簡單易懂，非常不錯，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-03-03
基于jQuery仿淘寶產(chǎn)品圖片放大鏡代碼分享
今天給大家分享一款基于jQuery淘寶產(chǎn)品圖片放大鏡代碼，這是一款基于jquery.imagezoom插件實現(xiàn)的jQuery放大鏡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-09-09
jQuery實現(xiàn)模糊查詢的方法分析
這篇文章主要介紹了jQuery實現(xiàn)模糊查詢的方法,結(jié)合實例形式分析了jQuery事件響應、節(jié)點遍歷、查詢匹配、屬性修改等相關(guān)操作技巧,需要的朋友可以參考下
2018-05-05
jquery獲取復選框的值的簡單實例
下面小編就為大家?guī)硪黄猨query獲取復選框的值的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
jQuery學習筆記更改jQuery對象
jQuery提供了一些方法，使流程變?yōu)樯蒵Query對象A，操作jQuery對象A；更改為jQuery對象B，操作jQuery對象B
2012-09-09
jQuery滾動新聞實現(xiàn)代碼
這篇文章主要為大家詳細介紹了jQuery滾動新聞實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-06-06
基于?jquery-cxselect?實現(xiàn)下拉聯(lián)動效果功能實現(xiàn)
這篇文章主要介紹了基于?jquery-cxselect?實現(xiàn)下拉聯(lián)動效果,下拉聯(lián)動是基于query的一款聯(lián)動下拉菜單插件 jquery-cxselect實現(xiàn)，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2023-02-02