实例讲解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 相关文章推荐
document.getElementById介绍
Sep 13 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
微信小程序实现下拉加载更多商品
Dec 29 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
php内核解析:PHP中的哈希表
2014/01/30 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
Python正则表达式使用范例分享
2016/12/04 Python
Django添加feeds功能的示例
2018/08/07 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
优秀体育委员自荐书
2014/01/31 职场文书
文秘个人求职信范文
2014/04/22 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
计算机专业自荐信
2015/03/05 职场文书
2015年英语教师工作总结
2015/05/20 职场文书