文档章节

Datatables表头不对齐解决办法

B
 BugsCode
发布于 2016/12/01 17:11
字数 264
阅读 2.9K
收藏 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实现根据每个用户动态显示隐藏列,可排序 前言 在后台管理系统开发中,难免会出现列数太多的情况,这里提供一个解决方案:用户设置显示哪些列,每个用户互不影响,并且可以根据...

osc_mk8rqvg4
2019/01/30
2
0
基于DataTables实现根据每个用户动态显示隐藏列,可排序

前言 在后台管理系统开发中,难免会出现列数太多的情况,这里提供一个解决方案:用户设置显示哪些列,每个用户互不影响,并且可以根据用户的习惯设置列的排序。 1、演示 2、html代码说明 3、...

osc_gu9d45li
2019/01/29
7
0
实现DataTables搜索框查询结果高亮显示

DataTables是封装好的HTML表格插件,丰富了HTML表格的样式,提供了即时搜索、分页等多种表格高级功能。用户可以编写很少的代码(甚至只是使用官方的示例代码),做出一个漂亮的表格以展示数据...

前端老手
2019/09/29
18
0
实现DataTables搜索框查询结果高亮显示

DataTables是封装好的HTML表格插件,丰富了HTML表格的样式,提供了即时搜索、分页等多种表格高级功能。用户可以编写很少的代码(甚至只是使用官方的示例代码),做出一个漂亮的表格以展示数据...

osc_8g11urw7
2018/10/18
2
0
前端插件之Datatables使用--下篇

工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了Datatables插件的基本使用,这一篇文章作为上一篇的延续,会介绍Databases的一些高...

osc_qbe93woo
04/16
14
0

没有更多内容

加载失败,请刷新页面

加载更多

在JavaScript中从字符串中删除所有非数字字符 - Strip all non-numeric characters from string in JavaScript

问题: Consider a non-DOM scenario where you'd want to remove all non-numeric characters from a string using JavaScript/ECMAScript. 考虑一个非DOM场景,您希望使用JavaScript / EC......

法国红酒甜
40分钟前
14
0
Quartz的Misfire处理规则 错过任务执行时间的处理机制

调度(scheduleJob)或恢复调度(resumeTrigger,resumeJob)后不同的misfire对应的处理规则 CronTrigger withMisfireHandlingInstructionDoNothing ——不触发立即执行 ——等待下次Cron触发频率...

独钓渔
今天
4
0
如何在Django视图中合并两个或多个查询集? - How to combine two or more querysets in a Django view?

问题: I am trying to build the search for a Django site I am building, and in that search, I am searching in 3 different models. 我正在尝试搜索要构建的Django网站,在该搜索中,我......

javail
今天
5
0
PHP解析/语法错误; 以及如何解决它们? - PHP parse/syntax errors; and how to solve them?

问题: Everyone runs into syntax errors. 每个人都遇到语法错误。 Even experienced programmers make typos. 即使是经验丰富的程序员也会打错字。 For newcomers, it's just part of the......

fyin1314
今天
20
0
OSChina 周三乱弹 —— 公主是大王的,命是自己的。小怪也要养家糊口啊!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :郭燕的单曲《下半生》 最近听一些轻快的歌 #今日歌曲推荐# 《下半生》 - 郭燕 手机党少年们想听歌,请使劲儿戳(这里) @锦年 :...

小小编辑
今天
38
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部