实例讲解DataTables固定表格宽度(设置横向滚动条)


Posted in Javascript onJuly 11, 2017

当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了。默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%",至于css的100%为什么不生效,原因未知。

下面就说说设置如何给datatables设置固定的宽度。

1、html代码

<div id="tableArea">
    <table id="userTable" class="display table table-bordered" cellspacing="0" >
      <thead>
      <tr>
        <th style="display: none">ck</th>
        <th>序号</th>
        <th>账号</th>
        <th>姓名</th>
        <th>CPID</th>
        <th>CP名称</th>
        <th>操作</th>
      </tr>
      </thead>
    </table>
</div>

2、覆盖某些样式(我们的样式优先级高,所以会覆盖内置的样式)

#tableArea .dataTables_wrapper {
  position: relative;
  clear: both;
  zoom: 1;
  overflow-x: auto;
}

#tableArea table{
  width: 800px;
}

这里的overflow-x:auto是新增的,表示表格内容超出宽度后,出现横向滚动条;table的width必须写死宽度,直接写在table元素上不生效,原因未知。

3、设置列宽(可略)

"columns": [

{ "data": "number", "orderable": false ,"width":"100px","searchable": false}
]

4、运行浏览,发现此时,当浏览器窗口小于800像素的时候,表格出现了横向的滚动条,正是我们想要的结果。

5、为什么不用"scrollX":true的配置实现横向滚动条呢?查询它渲染后的网页发现,它把table拆分成了两个表格,一个表示表头,一个表示表体。这不是我想要的,而且它表头的内容若是超出的话是隐藏的。

以上这篇实例讲解DataTables固定表格宽度(设置横向滚动条)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 #Javascript
自定义事件解决重复请求BUG的问题
Jul 11 #Javascript
关于js中的鼠标事件总结
Jul 11 #Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 #Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 #Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 #Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 #jQuery
You might like
杏林同学录(五)
2006/10/09 PHP
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
js时间日期和毫秒的相互转换
2013/02/22 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
Python中实现参数类型检查的简单方法
2015/04/21 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
Python3.5运算符操作实例详解
2019/04/25 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
2016年记者节感言
2015/12/08 职场文书
《花钟》教学反思
2016/02/17 职场文书
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL