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

 更新时间:2017年11月27日 14:55:42   作者:BugsCode  
这篇文章主要为大家详细介绍了jQuery Datatables表头不对齐的解决办法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

解决方法

#example{ 
 width: 100% !important; 
} 

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

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

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

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

相关文章

  • js/jquery去掉空格,回车,换行示例代码

    js/jquery去掉空格,回车,换行示例代码

    js/jquery去掉空格,回车,换行示例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • JQuery.uploadify 上传文件插件的使用详解 for ASP.NET

    JQuery.uploadify 上传文件插件的使用详解 for ASP.NET

    今天下午整理文件上传的例子,感觉收集到的例子都很不人性话,后来找到一个还可以的,本来想改成类似于腾讯QQ相册那种方式,仔细看了一下是Flash的, 而且那个极速上传插件也不知道用什么做的?问了一下,说是什么cgi. 搞得一头雾水
    2010-01-01
  • jquery使用append(content)方法注意事项分享

    jquery使用append(content)方法注意事项分享

    append(content)函数的功能向每个匹配的元素内部追加内容,在使用方法上需要引起大家的注意,详细看下面示例
    2014-01-01
  • jQuery实现颜色打字机的完整代码

    jQuery实现颜色打字机的完整代码

    这篇文章主要介绍了jQuery实现颜色打字机的完整代码,代码简单易懂,非常不错,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • 基于jQuery仿淘宝产品图片放大镜代码分享

    基于jQuery仿淘宝产品图片放大镜代码分享

    今天给大家分享一款基于jQuery淘宝产品图片放大镜代码,这是一款基于jquery.imagezoom插件实现的jQuery放大镜,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-09-09
  • jQuery实现模糊查询的方法分析

    jQuery实现模糊查询的方法分析

    这篇文章主要介绍了jQuery实现模糊查询的方法,结合实例形式分析了jQuery事件响应、节点遍历、查询匹配、属性修改等相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • jquery获取复选框的值的简单实例

    jquery获取复选框的值的简单实例

    下面小编就为大家带来一篇jquery获取复选框的值的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jQuery学习笔记 更改jQuery对象

    jQuery学习笔记 更改jQuery对象

    jQuery提供了一些方法,使流程变为生成jQuery对象A,操作jQuery对象A;更改为jQuery对象B,操作jQuery对象B
    2012-09-09
  • jQuery滚动新闻实现代码

    jQuery滚动新闻实现代码

    这篇文章主要为大家详细介绍了jQuery滚动新闻实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 基于 jquery-cxselect 实现下拉联动效果功能实现

    基于 jquery-cxselect 实现下拉联动效果功能实现

    这篇文章主要介绍了基于 jquery-cxselect 实现下拉联动效果,下拉联动是基于query的一款联动下拉菜单插件 jquery-cxselect实现,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-02-02

最新评论