文档章节

Datatables表头不对齐解决办法

B
 BugsCode
发布于 2016/12/01 17:11
字数 264
阅读 66
收藏 1

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

 

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

 

 

 

 

 

 

 

© 著作权归作者所有

共有 人打赏支持
B
粉丝 0
博文 2
码字总数 515
作品 0
厦门
dataTables相关资料参考

https://www.cnblogs.com/sweeeper/p/6106320.html http://yuemeiqing2008-163-com.iteye.com/blog/2006942...

ahl123
07/02
0
0
DataTables_详细使用方法

jQuery的DataTables插件的使用方法 ADMIN 2011年11月23日 13:15:45 发布 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTable...

喵王不瞌睡
2015/05/02
0
1
dataTables-使用详细说明整理

本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.NET/] 二:基本使用:[http://www.guoxk.com/node/jQuery-datatables] 1、DataTables的默认配置 $(...

ahl123
07/02
0
0
DataTables 使用配置

一:官方网站:[http://www.datatables.net/] 二:基本使用:[http://www.guoxk.com/node/jquery-datatables] 1、DataTables的默认配置 $(document).ready(function() { $('#example').dataT......

谢锡鹏
2015/01/19
0
0
jquery之DataTables的使用

强大的表格解决方案,有多强大,一起来看下吧: 1、DataTables的默认配置 $(document).ready(function() { $(‘#example’).dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/...

mickelfeng
2012/11/12
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

docker中安装了RabbitMQ后无法访问其Web管理页面

在官网找了"$ docker run -d --hostname my-rabbit --name some-rabbit -p 8080:15672 rabbitmq:3-management"这条安装命令,在docker上安装了RabbitMQ,,结果输入http://localhost:8080并不......

钟然千落
23分钟前
0
0
spring-cloud | 分布式session共享

写在前面的话 各位小伙伴,你们有福了,这一节不仅教大家怎么实现分布式session的问题,还用kotlin开发,喜欢kotlin的小伙伴是不是很开心! 以前在写Android的时候,就对客户端请求有一定的认...

冯文议
43分钟前
0
0
c语言之内存分配笔记

先看一个数组: short array[5] = {1,2} // 这儿定义的一个int类型的数组,数组第1和第2个元素值是1和2.其余后面默认会给值为0; 或者 short array[] = {1,2};//这儿数组第1和第2个元素,数组...

DannyCoder
今天
4
0
Shell | linux安装包不用选择Y/N的方法

apt-get install -y packageOR echo "y" | sudo apt-get install package

云迹
今天
2
0
Hadoop的大数据生态圈

基于Hadoop的大数据的产品圈 大数据产品的一句话概括 Apache Hadoop: 是Apache开源组织的一个分布式计算开源框架,提供了一个分布式文件系统子项目(HDFS)和支持MapReduce分布式计算的软件架...

zimingforever
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部