dataTable表头未对其解决方法
本文为博主原创,未经允许不得转载:
在tab页中使用dataTable时,默认显示的dataTable表头与数据显示正常,另一个的datatable则表头与数据未对其。
检查元素发现,datatable有一个div(类名为dataTables_scrollHeadInner)的width为100px,显然是默认值,其获取父元素的宽度失败。
none导致的datatable无法成功获取父元素的具体数值,所以导致了布局混乱。
示例如下:
解决方法如下:
将原来jsp中table代码展示如下:
<table id="data-table2" class=" table table-hover table-bordered dataTable no-footer dtr-inline"
role="grid" aria-describedby="data-table_info" style="margin-left: 0px; width:100% !important;">
<thead>
<tr>
<th>镜头名称</th>
<th>一级区域名称</th>
<th>客户名称</th>
<th>所属行业类型</th>
<th>在线时长</th>
<th>离线时长</th>
<th>设备在线率</th>
<th>平台类型</th>
</tr>
</thead>
</table>
将其修改为一下格式即可,只需要给<th>标签添加一个宽度即可。修改后代码如下:
<table id="data-table2" class=" table table-hover table-bordered dataTable no-footer dtr-inline"
role="grid" aria-describedby="data-table_info" style="margin-left: 0px;">
<thead>
<tr role="row">
<th width="22%">镜头名称</th>
<th width="11%">一级区域名称</th>
<th width="15%">客户名称</th>
<th width="10%">所属行业类型</th>
<th width="13%">在线时长</th>
<th width="13%">离线时长</th>
<th width="10%">设备在线率</th>
<th width="14%">平台类型</th>
</tr>
</thead>
</table>
然后清除浏览器缓存,重新加载页面,即可正常显示。
dataTable表头未对其解决方法的更多相关文章
- make:cc 命令未找到的解决方法
安装redis时遇到的问题 make:cc 命令未找到的解决方法 没安装gcc,然后安装 yum install gcc yum install gcc-c++
- Windows win7下VMware Virtual Ethernet Adapter未识别网络解决方法
win7下VMware Virtual Ethernet Adapter未识别网络解决方法[摘] by:授客 QQ:1033553122 问题描述 win7系统下安装VMware,查看网卡适配器设置, ...
- 解决:make:cc 命令未找到的解决方法
安装Redis的时候报这个错误 原因:未安装gcc 解决方法:安装gcc 自动安装,包括依赖库[root@VM_220_111_centos redis-3.2.9]# yum -y install ...
- VS2017未安装MFC解决方法
VS2017未安装MFC解决方法 https://blog.csdn.net/u010921682/article/details/89847395
- 关于win7右下角显示“音频服务未运行”的解决方法
今天打开电脑发现右下角的的小喇叭多了个叉叉,显示“音频服务未运行”,百度了一下,解决方法还是挺多的,一下是百度到的解决方法,希望可以帮到出现这个问题的朋友们. 解决方法:(转载的) 1.Windows ...
- wxpython 拖动界面时进入假死状态(未响应)解决方法
场景:在一个事件中调用一个函数,但是这个函数执行的时间非常的长,此过程中拖动界面的时候会使得界面进入未响应状态,直到函数执行完才可以ok 解决方法: 在调用函数的时候使用多线程调用 import th ...
- win10 音频服务未响应的解决方法
最近在调试usb audio设备,由于使用的是自己的audio 设备,所以要频繁的更换采样率,可是 在win10中经常出现一些莫名其妙的问题,今天这个问题就是折腾了我好久才搞定的. 当把usb aud ...
- layui topbar图标(即返回顶部)未显示的解决方法
在自己搭建纯html模板的时候,遇到了topbar无法显示的问题,搜了社区都没啥有用的解决方法,于是引用了util.js的源文件,发现用dom变量未获取到正确的scrollTop值,经过反复测试,把这 ...
- 数据库-PLSQL登录oracle数据库卡死(未响应)解决方法
上次重装系统后重新安装了oracle和PLSQL,哪知道PLSQL登录不了,一登录就未响应,但如果不登录就不卡死,直接就进去了.在网上查了很多解决方法,都没有用. 后来在百度文库找到解决办法,重启Or ...
随机推荐
- FilenameFilter
Introduction: java.io.FileNameFilter is a interface which is for filtering by filename, if filename ...
- flask 使用Flask-WTF处理表单
使用Flask-WTF处理表单 扩展Flask-WTF继承了WTFforms,使用它可以在flask中更方便的使用WTForms.Flask-WTF将表单数据解析.CSRF保护.文件上传等功能与Fla ...
- 【JavaScript 6连载】三、构造函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- GUI常用对话框4
%普通对话框 dialog %单击时会关闭当前窗口 %自定义 关于对话框 点击确定 关闭 h = dialog( ]); uicontrol( ], ... 'string','确定','Callba ...
- Python+OpenCV图像处理(十一)—— 图像金字塔
简介:图像金字塔是图像中多尺度表达的一种,最主要用于图像的分割,是一种以多分辨率来解释图像的有效但概念简单的结构.简单来说,图像金字塔就是用来进行图像缩放的. 进行图像缩放可以用图像金字塔,也可以使用 ...
- Javascript 面向对象编程1:封装
Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,他又不是一种真正的面向对象编程语言,因为它的语法中没有class(类). 那么,如果我们要把& ...
- Maven 工程读取resource下的文件
1:方式1: public static List<String> userList; static { userList = new LinkedList<String>() ...
- Android开发发布真机调试
使用真机测试原因: 1. 模拟器启动慢,真机测试速度较快 2. 有些程序在真机测试才有效,模拟器存在bug,结果要以真机为标准 连接方法: 1.设置手机为开发者模式(设置->关于手机->连 ...
- python简说(二十一)开发接口
一.flask举例 import flaskserver = flask.Flask(__name__)#新建一个服务,把当前这个python文件当做一个服务@server.route('/login ...
- tar 压缩指令基本用法
压缩:tar -cjvf aaa.tar.bz2 www.test.com/ --exclude *.log(-j是用bz2压缩,-exclude是排除.log后缀的文件) c-创建 j-bzip ...