实例讲解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 相关文章推荐
用javascript获得地址栏参数的两种方法
Nov 08 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
网页中的图片查看器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 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
php防止sql注入代码实例
2013/12/18 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
JS hashMap实例详解
2016/05/26 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
js实现日历与定时器
2017/02/22 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
从零学Python之hello world
2014/05/21 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
python常量折叠基础知识点讲解
2021/02/28 Python
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
大学生实习期自我评价范文
2013/10/03 职场文书
大学学年自我鉴定
2013/10/28 职场文书
外贸业务员求职信范文
2013/12/12 职场文书
高中自我鉴定
2013/12/20 职场文书
市场营销管理制度
2014/01/29 职场文书
高中家长寄语
2014/04/02 职场文书
出差报告怎么写
2014/11/06 职场文书