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ù)器查詢(xún)數(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">名稱(chēng)</th> 
  <th width="100">說(shuō)明</th> 
  <th width="100">類(lèi)型</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; 
}

收工，這樣就完美解決了?。?/p>

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

您可能感興趣的文章:

相關(guān)文章

跟著JQuery API學(xué)Jquery 之四 css
在javascript中我們常常要改變dom的css樣式，同樣Jquery也對(duì)改變css做了封裝不用我們?nèi)ビ?getElementByid().style.……來(lái)操作了
2010-04-04
jquery輸入數(shù)字隨機(jī)抽獎(jiǎng)特效的簡(jiǎn)單實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jquery輸入數(shù)字隨機(jī)抽獎(jiǎng)特效的簡(jiǎn)單實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
jQuery select的操作實(shí)現(xiàn)代碼
jQuery對(duì)select的操作的實(shí)際應(yīng)用代碼。方便大家學(xué)習(xí)jquery
2009-05-05
jQuery中的事件詳解
本文詳細(xì)講解了jQuery中的事件，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-05-05
vue-preview縮略圖報(bào)錯(cuò)解決
這篇文章主要為大家介紹了vue-preview縮略圖報(bào)錯(cuò)解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
jquery select動(dòng)態(tài)加載選擇(兼容各種瀏覽器)
jquery select動(dòng)態(tài)加載選擇,兼容各種瀏覽器包括ie6,在ie6下會(huì)報(bào)錯(cuò),不過(guò)我們已有解決方法，感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)jquery有所幫助
2013-02-02
jQuery入門(mén)之層次選擇器實(shí)例簡(jiǎn)析
這篇文章主要介紹了jQuery入門(mén)之層次選擇器用法,以簡(jiǎn)單實(shí)例形式分析了jQuery層次選擇器中ancestor descendant與parent>child的區(qū)別,需要的朋友可以參考下
2015-12-12
jquery實(shí)現(xiàn)像柵欄一樣左右滑出式二級(jí)菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)像柵欄一樣左右滑出式二級(jí)菜單效果代碼,涉及jquery鼠標(biāo)click點(diǎn)擊事件及頁(yè)面元素動(dòng)態(tài)操作的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08
jquery實(shí)現(xiàn)走馬燈特效實(shí)例(撲克牌切換效果）
本文主要介紹了jquery實(shí)現(xiàn)走馬燈特效實(shí)例(撲克牌切換效果），文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
jQuery的ztree仿windows文件新建和拖拽功能的實(shí)現(xiàn)代碼
zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹(shù)插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。這篇文章主要介紹了jQuery的ztree仿windows文件新建和拖拽功能的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2018-12-12