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实现百度登录框的动态切换效果
Apr 21 jQuery
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 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性能的原理介绍
2012/09/05 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
详解javascript遍历方式
2015/11/11 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
深入理解Vue nextTick 机制
2018/04/28 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
python实现巡检系统(solaris)示例
2014/04/02 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
python实现逻辑回归的方法示例
2017/05/02 Python
详解Python pygame安装过程笔记
2017/06/05 Python
Python日期的加减等操作的示例
2017/08/15 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Django中间件基础用法详解
2019/07/18 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
挑战杯创业计划书的写作指南
2014/01/07 职场文书
志愿者宣传口号
2014/06/17 职场文书
大学生交通专业求职信
2014/09/01 职场文书
六查六看心得体会
2014/10/14 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸