首页 > web前端 > js教程 > 正文

Datatables表头不对齐怎么办

小云云
发布: 2017-11-29 09:32:15
原创
2433 人浏览过

本章我们将教大家一种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>
登录后复制

2017112714560717_副本.png

解决方法

#example{ 
 width: 100% !important; 
}
登录后复制

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

#example{ 
 width: ***px !important; 
}
登录后复制

2017112714560718_副本.png

这样就完美解决啦。

以上内容就是jQuery Datatables表头不对齐的解决办法,希望能帮助到大家。

相关推荐:

PHPExcel实现冻结锁定表头的方法介绍

html5中实现table表格中的斜线表头效果的5种做法

关于表头排序的5篇文章推荐

以上是 Datatables表头不对齐怎么办的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板