Datatables表头不对齐解决办法
博客专区 > BugsCode 的博客 > 博客详情
Datatables表头不对齐解决办法
BugsCode 发表于1年前
Datatables表头不对齐解决办法
  • 发表于 1年前
  • 阅读 37
  • 收藏 1
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: 我们用Datatables经常会遇到这种情况,就是浏览器或者HTML里元素改变大小或分辨率后,标题就会出现不对齐现象。

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

 

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

 

 

 

 

 

 

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 2
码字总数 515
×
BugsCode
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: