快捷導(dǎo)航

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

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

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

我們用Datatables經(jīng)常會遇到這種情況，就是瀏覽器或者HTML里元素改變大小或分辨率后，標(biāo)題就會出現(xiàn)不對齊現(xiàn)象。這種情況是因為Datatables框架中使用到serverSide : true,// 服務(wù)器查詢數(shù)據(jù)屬性，它會使Table標(biāo)簽中多一個style="width:**px;"屬性，這就導(dǎo)致了變化大小時標(biāo)題對不齊現(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">是否默認(rèn)</th> 
  <th width="20">狀態(tài)</th> 
  <th width="100"></th> 
 </thead> 
 <tbody> 
 </tbody> 
</table>

解決方法

#example{ 
 width: 100% !important; 
}

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

jQuery插件ajaxFileUpload使用詳解
這篇文章主要為大家詳細(xì)介紹了jQuery插件ajaxFileUpload使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
JQuery實現(xiàn)絢麗的橫向下拉菜單
以前經(jīng)?？匆娋W(wǎng)站有菜單的顯示，鼠標(biāo)移上去就出現(xiàn)下拉的效果，下面為大家介紹下,下面為大家介紹下JQuery實現(xiàn)的橫向下拉菜單
2013-12-12
Jquery 獲取指定標(biāo)簽的對象及屬性的設(shè)置與移除
這篇文章主要介紹了Jquery如何獲取指定標(biāo)簽的對象及屬性的設(shè)置與移除,需要的朋友可以參考下
2014-05-05
基于jQuery實現(xiàn)左側(cè)菜單欄可折疊功能
這篇文章主要介紹了基于jQuery實現(xiàn)左側(cè)菜單欄可折疊功能，介紹菜單折疊過程中三種變換形式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
jQuery 源代碼顯示控件 (Ajax加載方式).
比較不錯的用ajax加載css或js等文件的源代碼，以前都是需要把代碼放到網(wǎng)頁中，使用這個控件就不需要。
2009-05-05
JQuery設(shè)置時間段下拉選擇實例
這篇文章主要介紹了JQuery設(shè)置時間段下拉選擇的實現(xiàn)方法,實例分析了根據(jù)時間段設(shè)置下拉選項的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2014-12-12
合并table相同單元格的jquery插件分享(很精簡)
正好項目中有個小需求, 要求把表格指定列中內(nèi)容相同的單元格進(jìn)行合并,本質(zhì)上涉及的就是td的rowspan屬性, 數(shù)出含相同內(nèi)容單元格的個數(shù), 然后給第一個與上一行內(nèi)容不同的td其rowspan屬性附上正確的值即可, 為了能直觀的理解
2011-06-06
jQuery實現(xiàn)發(fā)送驗證碼并60秒倒計時功能
這篇文章主要介紹了jQuery實現(xiàn)發(fā)送驗證碼并60秒倒計時功能，非常不錯，代碼簡單易懂，需要的朋友參考下吧
2016-11-11
jquery實現(xiàn)的可隱藏重現(xiàn)的靠邊懸浮層實例代碼
本實例使用jquery操作div的CSS實現(xiàn)了可隱藏重現(xiàn)的靠邊懸浮層，具體實現(xiàn)代碼如下，感興趣的朋友可以參考下哈
2013-05-05
jQuery對表單元素的取值和賦值操作代碼
使用常規(guī)的思路：$(“#keyword”).value 取值是取不到的，因為此時$(‘#keydord’)已經(jīng)不是個element，而是個jquery對象，所以應(yīng)該使用：$(“#keyword”).val()
2011-05-05