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+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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分页效率终结版(推荐)
2013/07/01 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python argv用法详解
2016/01/08 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
详解Python打包分发工具setuptools
2019/08/05 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
教师自荐信
2013/12/10 职场文书
《海底世界》教学反思
2014/04/16 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
2014年党委工作总结
2014/11/22 职场文书
面试通知单大全
2015/04/20 职场文书