jQuery Datatables表头不对齐的解决办法


Posted in jQuery onNovember 27, 2017

我们用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>

jQuery Datatables表头不对齐的解决办法

解决方法

#example{ 
 width: 100% !important; 
}

如果遇到设有横向滚动条时,就固定设置Table宽度

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

收工,这样就完美解决了!!

jQuery Datatables表头不对齐的解决办法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 #jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 #jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 #jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 #jQuery
jquery ajaxfileupload异步上传插件
Nov 21 #jQuery
jquery中有哪些api jQuery主要API
Nov 20 #jQuery
jquery ztree实现右键收藏功能
Nov 20 #jQuery
You might like
一些使用频率比较高的php函数
2008/10/03 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
荟萃全球保健品:维他购
2018/05/09 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
《欢乐的泼水节》教学反思
2014/04/22 职场文书
企业文化标语大全
2014/06/10 职场文书
完整版商业计划书
2014/09/15 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
先进个人事迹材料
2014/12/29 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
mysql查询结果实现多列拼接查询
2022/04/03 MySQL