快捷導(dǎo)航

jQuery Datatables表頭不對(duì)齊的解決辦法

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

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

我們用Datatables經(jīng)常會(huì)遇到這種情況，就是瀏覽器或者HTML里元素改變大小或分辨率后，標(biāo)題就會(huì)出現(xiàn)不對(duì)齊現(xiàn)象。這種情況是因?yàn)镈atatables框架中使用到serverSide : true,// 服務(wù)器查詢數(shù)據(jù)屬性，它會(huì)使Table標(biāo)簽中多一個(gè)style="width:**px;"屬性，這就導(dǎo)致了變化大小時(shí)標(biāo)題對(duì)不齊現(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">說(shuō)明</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è)有橫向滾動(dòng)條時(shí)，就固定設(shè)置Table寬度

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

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

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

您可能感興趣的文章:

相關(guān)文章

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