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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jquery replace方法去空格
May 08 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jQuery实现评论模块
Aug 19 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
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
分享20款好玩的jQuery游戏
2011/04/17 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
javascript求日期差的方法
2016/03/02 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
node.js实现的装饰者模式示例
2017/09/06 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
用python读取xlsx文件
2020/12/17 Python
python解包概念及实例
2021/02/17 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
财产保全担保书范文
2014/04/01 职场文书
团员年度个人总结
2015/02/26 职场文书
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis